react 前端实现导出功能

react前端实现导出功能

前两天接到一个需求，页面中的导出功能由前端这边实现，后台不提供接口。
于是开始疯狂百度，挑选一些简单的教程，开始安装依赖或插件。可能是npm版本的问题，导致安装完成依赖后项目直接跑不起来，重新运行npm install 或 cnpm install 或 yarn install都不行。

解决方案：
把项目中的node_modules文件夹删除，重新运行npm install 或 cnpm install 或 yarn install，优先使用 yarn install，然后再运行 npm run build，最后运行 npm run dev项目启动成功！

示例

1. 添加依赖

• 执行npm install js-export-excel 或 yarn add js-export-excel

2. 组件代码

import ExportJsonExcel from "js-export-excel";
interface Excel {
  fileName: string;
  resdata: {}[];
  sheetfilter: string[];
  sheetheader: string[];
  sheetname: string;
}

const ExportToExcel = (params: Excel) => {
  console.log("ExportToExcel:", params);
  const option: any = {};
  option.fileName = params.fileName; //导出的Excel文件名
  option.datas = [
    {
      sheetData: params.resdata, // 传入的数据[{name: "张三", age: "18"}]
      sheetName: params.sheetname, // 工作表的名字
      sheetFilter: params.sheetfilter, // sheetfilter: 传入的数据[{name: "张三", age: "18"}], sheetfilter = ["name", "age"]
      sheetHeader: params.sheetheader // sheetheader: excel表头, ["姓名", "年龄"]
    }
  ];
  const toExcel = new ExportJsonExcel(option);
  toExcel.saveExcel();
};

export default ExportToExcel;

注意：若某些字段导出为枚举或字典的key值，可在导出的数据源resdata中先处理

推荐

在此推荐个人认为比较简单且实现效果不错的文章：https://blog.csdn.net/qq_42936527/article/details/117785166