react 前端导出Excel

1.首先下载 js-export-excel

   npm install js-export-excel;

2.下载 xlsx

   npm install xlsx;

3.引入

   import * as XLSX from 'xlsx'
   import ExportJsonExcel from 'js-export-excel'
 
4.定义方法
   
   downloadFileToExcel = () => {
        let option = {};  //option代表的就是excel文件
        option.fileName = 'demo表';  //excel文件名称
        option.datas = [
            {
                sheetData: this.state.dataTable,  //excel文件中的数据源
                sheetName: 'demo',  //excel文件中sheet页名称
                sheetFilter: ['你的名称', '我的名称', '你的编号', '我的方案'],  //excel文件中需显示的列数据
                sheetHeader:['你的名称', '我的名称', '你的编号', '我的方案']  //excel文件中每列的表头名称
            }
        ]
        let toExcel = new ExportJsonExcel(option);  //生成excel文件
        toExcel.saveExcel();  //下载excel文件
    }
 
5.调用后台接口获取数据源
   
   axios.post('后台接口地址').then(res=>{
         this.state.dataTable = [];
         data.map(item=>{
              // 表头一一对应
              this.state.dataTable.push(
                        {
                            '你的名称':item.YourName,
                            '我的名称':item.MyName, 
                            '你的编号':item.YourNo, 
                            '我的方案':item.MyNo
                        }
                    )
              })
             // 调用导出excel方法
             this.downloadFileToExcel()
   })
 
这样就完完整整的实现了前端导出excel的方法了
 
 

posted on 2021-12-24 10:48  ranyonsue  阅读(816)  评论(2编辑  收藏  举报

导航