前端具體業務系列一：在瀏覽器中使用 js-xlsx ，實現純前端解析Excel文件，實現批量導入功能

這是我很久以前寫的文章，如果有什么不對的地方請指出，原文：https://ruizer.github.io/2019/04/09/js-xlsx/

為什么要用 js-xlsx

1. 實際開發中，經常會遇到批量導入（導入 Excel）的功能，特別是后台管理系統；
2. js-xlsx 是由SheetJS出品的一款非常方便、多格式支持、純 JS 且兼容性強的解析和導出工具庫，能同時運行在瀏覽器端和服務器端，本文都是以瀏覽器端為例；

如何使用

• 官方 GitHub：https://github.com/SheetJS/js-xlsx
• 本文配套 Demo：https://ruizer.github.io//demo/#/xlsx

在瀏覽器中，只需要添加 script 腳本（官方 GitHub 上即可下載）：

<script type="text/javascript" src="dist/xlsx.full.min.js"></script>

CND	網址
unpkg	https://unpkg.com/xlsx/
jsDelivr	https://jsdelivr.com/package/npm/xlsx
CDNjs	http://cdnjs.com/libraries/xlsx
packd	https://bundle.run/xlsx@latest?name=XLSX

當然也可以用npm、bower

npm install xlsx
bower install js-xlsx

解析 Excel

瀏覽器端解析 Excel 主要是通過 XLSX.read(data,read_opts)來實現，返回一個 WorkBook 對象，然后對 WorkBook 對象進行處理；
read_opts 參數：type、raw、codepage 等，具體可見options

type 為讀取方式：

• base64：base64 編碼
• binary：二進制字符串
• string：JS 字符串
• buffer：nodejs Buffer
• array：8 位無符號整數數組
• file：將讀取的文件的路徑（僅限 nodejs）

獲取 WorkBook 對象

// 讀取本地文件
readFileForWorkbook(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        let wb;
        reader.onload = res => {
          const data = res.target.result;
          wb = XLSX.read(data, {
            type: "binary"
          });
          resolve(wb);
        };
        reader.onerror = e => {
          reject(e);
        };
        reader.readAsBinaryString(file);
     });
}

使用 WorkBook 對象

WorkBook 對象里面到底有什么呢

可以看到 Excel 所有信息，我們主要使用 SheetNames、Sheets 對象；
SheetNames：包含所有的 Sheet 名字
Sheets：保存每個 sheet 的具體內容，每個 sheet 又是通過 A1 等鍵值保存每個單元格的內容

讀取 WorkBook 對象

主要的輔助函數

• XLSX.utils.sheet_to_csv：生成 CSV
• XLSX.utils.sheet_to_html：生成 HTML
• XLSX.utils.sheet_to_json: 生成一個對象數組
• XLSX.utils.sheet_to_txt：生成 UTF16 格式化文本
• XLSX.utils.sheet_to_formulae：生成公式列表

一般使用 sheet_to_csv、sheet_to_html、sheet_to_json 這三種，to_csv 會忽略格式等信息; to_html 會保留格式，但生成的是html而不是table，有定制化需求的時候可能不太適合；使用 to_json 就能實現批量導入功能了，轉成 JSON 數組傳個后台

// 根據不同類型處理work對象
analysisWorkbook(type) {
    let list = [];
    let fun = null;
    switch (type) {
        case "csv":
          fun = XLSX.utils.sheet_to_csv;
          break;
        case "txt":
          fun = XLSX.utils.sheet_to_txt;
          break;
        case "html":
          fun = XLSX.utils.sheet_to_html;
          break;
        case "formulae":
          fun = XLSX.utils.sheet_to_formulae;
          break;
        default:
          fun = XLSX.utils.sheet_to_json;
          break;
    }
    this.workbook.SheetNames.forEach(sheet => {
        const ref = this.workbook.Sheets[sheet]["!ref"];
        if (ref) {
          list = list.concat(fun(this.workbook.Sheets[sheet]));
        }
    });
    return list;
},