react 前端导出Excel

react

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的方法了