react-antd表格导出为Excel

安装插件js-export-excel

npm install js-export-excel

or

yarn add js-export-excel

在需要的地方引入该模块

import ExportJsonExcel from 'js-export-excel';//excel表格导出

如果碰到引入报错

 再src 根目录下加入一个 .d.ts 的文件 声明一下  是因为ts 找不到这个模块

//根目录 xxx.d.ts 文件中加上 如果没有就创建，文件为 xxx.d.ts
declare module 'js-export-excel' // js 转 ts模块引入

使用

<Button type="primary" onClick={this.downloadExcel} style={{ margin: "10px 10px" }}>班级配置导出</Button>

核心代码  

download = () => {
        let data=[
  {
    name: '1',
    password: 'John Brown',
    department: 98,
    idcard: 60,
    bankcard: 70,
  },
  {
    name: '1',
    password: 'John Brown',
    department: 98,
    idcard: 60,
    bankcard: 70,
  },
  {
    name: '1',
    password: 'John Brown',
    department: 98,
    idcard: 60,
    bankcard: 70,
  },
  {
    name: '1',
    password: 'John Brown',
    department: 98,
    idcard: 60,
    bankcard: 70,
  },
];;
        let option={};
        let dataTable=[];
        option.fileName = '报销人员';  //excel文件名称

        data.map(v=>{
            dataTable.push({
                '姓名': v.name,
                '密码': v.password,
                '部门': v.department,
                '身份证': v.idcard,
                '社保卡': v.sscard,
                '银行卡': v.bankcard,
            })
        });
        option.datas=[
            {
                sheetData:dataTable,
                sheetName:'sheet',
                sheetFilter: ["姓名", "密码", "部门", "身份证", "社保卡", "银行卡"],
                sheetHeader: ["姓名", "密码", "部门", "身份证", "社保卡", "银行卡"],
            }
        ];
        let toExcel = new ExportJsonExcel(option);
        toExcel.saveExcel()
    };
    

data是表格的数据根据情况自己拿   上述只是示例的数据

 参数的说明

// 直接导出文件
const ExportJsonExcel = require("js-export-excel");

var option = {};

option.fileName = "excel";

option.datas = [
  {
    sheetData: [
      { one: "一行一列", two: "一行二列" },
      { one: "二行一列", two: "二行二列" },
    ],
    sheetName: "sheet",
    sheetFilter: ["two", "one"],
    sheetHeader: ["第一列", "第二列"],
    columnWidths: [20, 20],
  },
  {
    sheetData: [
      { one: "一行一列", two: "一行二列" },
      { one: "二行一列", two: "二行二列" },
    ],
  },
];

var toExcel = new ExportJsonExcel(option); //new
toExcel.saveExcel(); //保存

// 导出Blob，支持压缩等其他操作
const ExportJsonExcel = require("js-export-excel");
const JSZip = require("jszip");

var option = {};

option.fileName = "excel";

option.saveAsBlob = true;

option.datas = [
  {
    sheetData: [
      { one: "一行一列", two: "一行二列" },
      { one: "二行一列", two: "二行二列" },
    ],
    sheetName: "sheet",
    sheetFilter: ["two", "one"],
    sheetHeader: ["第一列", "第二列"],
    columnWidths: [20, 20],
  },
  {
    sheetData: [
      { one: "一行一列", two: "一行二列" },
      { one: "二行一列", two: "二行二列" },
    ],
  },
];

var toExcel = new ExportJsonExcel(option); //new

let file = toExcel.saveExcel();

// 压缩文件
var zip = new JSZip();

// 多个excel 依次加入(fileName不能相同)
zip.file(file.name, file);

zip.generateAsync({ type: "blob" }).then(function (content) {
  // see FileSaver.js
  saveAs(content, "example.zip"); // 下载文件
});

option

• fileName 下载文件名(默认：download)

• saveAsBlob 导出文件流(默认： false)

• datas 数据

/*多个sheet*/
/*每个sheet为一个object */
[{
sheetData:[], // 数据
sheetName:'', // sheet名字
sheetFilter:[], //列过滤
sheetHeader:[] // 第一行
columnWidths: [] //列宽 需与列顺序对应
}]

sheet option

• sheetName sheet 名字(可有可无)(默认 sheet1)

• sheetHeader 标题（excel 第一行数据）

sheetHeader: ["第一列", "第二列"];

columnWidths 列宽 非必须

// number 屏幕宽度为100 20即为 1/5屏幕大小
columnWidths = [20, ""];

sheetData 数据源(必须)

支持超链接解析，格式为 “hyperlink:site url”。eg： hyperlink:https://www.baidu.com

<!--两种形式-->
<!--第一种 object-->
[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}]
<!--第二种 arrary-->
[['一行一列','一行二列'],['二行一列','二行二列']]

sheetFilter 列过滤(只有在 data 为 object 下起作用)(可有可无)

sheetFilter = ["two", "one"];