js-xlsx 實現前端 Excel 導出(支持多 sheet)

以前寫文章介紹了使用 js-xlsx 實現導入 excel 的功能，如今再介紹一下如何使用 js-xlsx 進行 excel 導出。

【實現步驟】

1. 首先安裝依賴

npm install xlsx --save

2. 在組件中導入 xlsx

import XLSX from 'xlsx';

3. 提供導出按鈕，編寫導出方法

<Button type='primary' onClick={this.handleExport}>EXCEL 導出</Button>

handleExport = () => {
  const sheetData1 = data1.map(item => ({
    'ID': item.id,
    '收件人': item.name,
    '手機號': item.phone,
    '掃描時間': item.scanTime,
  }));
  // 支持多 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');
}

注：要導出數據的 json 格式應該是這樣的（每一個對象表明表格中的一行數據）

[{
  id: '1',
  name: '張三丰',
  phone: '16834567890',
}, {
  // ...
}]

【效果演示】

點擊右上角導出按鈕，瀏覽器會自動下載表格文件，以下：

打開表格，查看數據，發現頁面中的表格數據和導出內容一致，而且已經按照設置的中文字段顯示了。

【問題解決】

1. 若是在導出過程當中瀏覽器報錯：XLSX.utils.json_to_sheet is not a function , 多是由於 xlsx 版本問題致使的，在調用 XLSX.utils.json_to_sheet() 方法前嘗試 打印 xlsx 的版本號：

console.log(XLSX.version)

通過簡單排查，應該是 0.8.8 如下版本不支持 json_to_sheet() 方法，因此直接升級 xlsx 到最新版（目前是 0.14.5 ）就能夠了。

npm install xlsx@0.14.5 --save

2. 以上只演示了單個 sheet 導出的實現和效果，而且簡單給出了多 sheet 導出的實現方案（ handleExport 方法中註釋部分），關於多 sheet 導出更詳細的實現方案，參考 展現 用xlsx庫 導出excel，含多個sheet。

3. 如何經過 xlsx 實現 excel 的導入和解析，參考 React讀取Excel——js-xlsx 插件的使用。

 

【參考資料】

1. SheetJS/sheetjs

2. 展現 用xlsx庫 導出excel，含多個sheet