React应用篇：实现导出excel

原创已于 2022-04-16 11:33:28 修改 · 1.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #js-export-excel #excel

于 2021-10-17 00:40:09 首次发布

React全家桶系列专栏收录该内容

40 篇文章

订阅专栏

这篇博客介绍了如何在JavaScript中使用js-export-excel库来导出Excel文件。作者详细展示了安装插件、引入库、配置导出选项及执行导出的步骤，包括设置文件名、数据、列宽等参数，帮助读者实现自定义的Excel数据导出功能。

前提

准备插件

yarn add js-export-excel --save

npm install js-export-excel --save

引入

const ExportJsonExcel = require("js-export-excel");

效果展示

在这里插入图片描述

完整代码

  // 导出excel
  const downloadExcel = () => {
    const {columnKey, columnValue} = formatColumn();
    let option: LooseObject = {
      fileName: 'excel',
      datas: [],
      sheetFilter: [],
      sheetHeader: [],
      columnWidths: []
    };
    // 文件名
    option.fileName = fileName;
    // excel的数据
    option.datas = [
      {
        sheetName: "基本信息",
        sheetData: formatTableData(),
        sheetFilter: columnKey,
        sheetHeader: columnValue,
        columnWidths: [10,10,10,10]
      }
    ]
    // 创建实例
    let toExcel = new ExportJsonExcel(option);
    // 保存下载excel
    toExcel.saveExcel();
  }