之前寫文章介紹了使用 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.
