使用 promise 封裝 xlsx（包含表頭數據）

xlsx: v0.15.6

目的

根據業務需求，在處理 xlsx 文件數據前，要先檢查一下表頭（第一行數據）是否正確。但 xlsx.utils.sheet_to_json 有個小 bug，如果表頭對應列無數據，則表頭對應的 key 也不存在。

基於以上問題，我們需要解析表格元數據，提取出表頭。

並且使用 promise 封裝，和 xlsx 文件數據一起返回。

實現

promise 最終狀態始終爲 resolve，處理成功返回 sheetName: { list, title }，處理失敗返回 false。

import XLSX from 'xlsx';

export const fileToJson = function (
  file: Blob,
  opts?: XLSX.Sheet2JSONOpts
) {
  return new Promise(function (resolve, reject) {
    try {
      let reader = new FileReader();

      reader.onload = function (ev) {
        let result = ev.target?.result;
        let data = XLSX.read(result, { type: 'binary' });
        let json: { [key in string]: object } = {};
        for (let k in data.Sheets) {
          let sheet = data.Sheets[k];
          let title = Object.keys(sheet)
            .filter((key) => /^[A-Z]+1$/.test(key))  // 篩選表頭
            .map((key) => sheet[key].v);  // 返回表頭文本
          json[k] = {
            list: XLSX.utils.sheet_to_json(sheet, opts),
            title,
          };
        }
        resolve(json);
      };

      reader.readAsBinaryString(file);

    } catch (err) {
      resolve(false);
    }
  });
};

使用

import { fileToJson } from './xlsx_utils';

handleXLSX = (e) => {
  fileToJson(e.target.files[0])
    .then(v => {
      if (v) {
        console.log(v);
      }
    })
}

<input type='file' onChange={this.handleXLSX} />

whosmeya.com