react使用xlsx插件做纯前端导出Excel（亲测有效）

纯前端导出Excel需要两个依赖，xlsx和file-saver
话不多说，上代码：

import XLSX from "xlsx";//必要依赖
import FileSaver from "file-saver";//必要依赖
import {Message} from "antd"
import _ from "lodash"
import moment from "moment"

class ExportExcel extends Component{
    constructor(){
        super()
        this.state={
            exportData:[{//模拟的JSON数据
              id:1,
              key1:"value1",
              key2:"value2",
              key3:"value3",
              key4:"value4",
              key5:"value5",
              key6:"value6",
            }]
        }
    }
    componentWillMount(){
    }

    //三个参数，title是生成的Excel文件名，headers是文件的头部，values为具体的json数据
 	 exportList=(title, headers, values)=>{
	  try {
	    //如果value的json字段的key值和想要的headers值不一致时，可做如下更改
	    //将和下面的Object.fromEntries结合，将json字段的key值改变为要求的excel的header值
	    const keyMap = {id:"headerId",key1:"header1",key2:"header2",key3:"header3",key4:"header4",key5:"header5",key6:"header6"}
	    const data = _.chain(values)
	      .map(i => {
	        let ne = _.cloneDeep(i);
	        const rzt = {
	          ..._.pick(ne, headers),
	        }; 
	        //改变key值为要求的excel的title值,但是edge不兼容，ca
	        // const newRzt = Object.fromEntries(Object.entries(rzt).map(([k, v]) => [keyMap[k]||k, v]))
	        const newRzt= Object.keys(rzt).reduce((newData, key) => {//上面的方法不兼容，所以用了这个方法处理headers
	          let newKey = keyMap[key] || key
	          newData[newKey] = rzt[key]
	          return newData
	        }, {})
	        return newRzt;
	      })
	      .value();
	    if (_.isEmpty(values)) {
	      console.log("没数据")
	      return;
	    }
	
	
	    const workbook = XLSX.utils.book_new();//创建一个新的工作簿对象
	    let ws = XLSX.utils.json_to_sheet(data);//将json对象数组转化成工作表
	    ws["!cols"]=[//设置每一列的宽度
	      {wch:30},
	      {wch:50},
	      {wch:20},
	      {wch:20},
	      {wch:20},
	      {wch:20},
	      {wch:50}
	    ]
	    XLSX.utils.book_append_sheet(workbook, ws, "sheet1");//把sheet添加到workbook里，第三个参数是sheet名
	    const wopts = { bookType: "xlsx", bookSST: false, type: "array" };//写入的样式bookType:输出的文件类型，type：输出的数据类型，bookSST: 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
	    const wbout = XLSX.write(workbook, wopts);// 浏览器端和node共有的API,实际上node可以直接使用xlsx.writeFile来写入文件,但是浏览器没有该API
	    FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), `${title} ${moment().format("YYYYMMDDHHmmss")}.xlsx`);//保存文件
	  } catch (e) {
	    console.log(e, e.stack);
	  }
	};
    render(){
            <div>
              <button onClick={this.exportList.bind(this,"exportList",["id","key1","key2","key3","key4","key5","key6"],this.state.exportData)}>export</button>
            </div>
        )
    }
}
export default ExportExcel 

如果对您有一丝帮助的话，赏个赞可好~

总体思路如下：

1. 创建一个新的工作簿对象
2. 将json对象转化成工作表
3. 将工作表（sheet）添加到工作簿（workbook）里
4. XLSX.write(workbook,opts)写入文件
5. 利用file-saver保存文件