js-xlsx for excel export

1. First install dependencies

npm install xlsx --save

2. Import xlsx in the component

import XLSX from 'xlsx';

3. Provide an export button and write an export method

<Button type='primary' onClick={handleExport}>EXCEL 导出</Button>

 // 将workbook装化成blob对象
        function workbook2blob(workbook) {
          // 生成excel的配置项
          var wopts = {
            // 要生成的文件类型
            bookType: "xlsx",
            // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
            bookSST: false,
            type: "binary"
          };
          var wbout = XLSX.write(workbook, wopts);
          // 将字符串转ArrayBuffer
          function s2ab(s) {
            var buf = new ArrayBuffer(s.length);
            var view = new Uint8Array(buf);
            for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
            return buf;
          }
          var blob = new Blob([s2ab(wbout)], {
            type: "application/octet-stream"
          });
          return blob;
        }
  
        // 将blob对象创建bloburl，然后用a标签实现弹出下载框
        function openDownloadDialog(blob, fileName) {
          if (typeof blob == "object" && blob instanceof Blob) {
            blob = URL.createObjectURL(blob); // 创建blob地址
          }
          var aLink = document.createElement("a");
          aLink.href = blob;
          // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
          aLink.download = fileName || "";
          var event;
          if (window.MouseEvent) event = new MouseEvent("click");
          //   移动端
          else {
            event = document.createEvent("MouseEvents");
            event.initMouseEvent( "click", true, false, window, 0, 0, 0, 0, 0, false,                 
       false, false, false, 0, null );
          }
          aLink.dispatchEvent(event);
        }



const handleExport = () => {
  const data1 = [{
          id: '1',
          name: '张三丰',
          phone: '16834567890',
           }]
  const sheetData1 = data1.map(item => ({
    'ID': item.id,
    '收件人': item.name,
    '手机号': item.phone,
  }));
  // 支持多 sheet
  // const sheetData2 = data2.map(item => ({
  //   // 在这里设置表头和对应项的值
  // }));
  // const sheetData3 = data3.map(item => ({
  //   // 在这里设置表头和对应项的值
  // }));
  // ...

  const sheet1 = XLSX.utils.json_to_sheet(sheetData1);
  // 支持多 sheet
  // const sheet2 = XLSX.utils.json_to_sheet(sheetData2);
  // const sheet3 = XLSX.utils.json_to_sheet(sheetData3);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, sheet1, '收件人列表');
  // 支持多 sheet
  // XLSX.utils.book_append_sheet(wb, sheet2, '表格 sheet2');
  // XLSX.utils.book_append_sheet(wb, sheet2, '表格 sheet2');
  const workbookBlob = workbook2blob(wb);
  // 导出最后的总表
  openDownloadDialog(workbookBlob, '收件人列表.xlsx');
}

exported photos

js-xlsx for excel export

Guess you like