前端需要對(duì) excel 文件進(jìn)行讀取并操作，通常借助第三方開(kāi)源框架 xlsx.js 來(lái)實(shí)現(xiàn)。

xlsx.js 的基本引用

//npm 引入 xlsx.js 庫(kù)
npm install xlsx

//若項(xiàng)目使用 ts， 則需要在 shims-vue.d.ts 中對(duì) xlsx 進(jìn)行聲明
declare module 'xlsx';

// 還需要在 webpack 中對(duì) xlsx 中使用的模塊進(jìn)行 externals 。 拿 vue-cli 腳手架進(jìn)行舉例
// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      './cptable': 'var cptable',
      '../xlsx.js': 'var _XLSX'
    }
  },
}

//在相關(guān)文件中引用該庫(kù)
import XLSX from 'xlsx'

// 把讀取 file 文件
 const fileReader = new FileReader();
fileReader.onload = event => {
     try {
        const { result } = event.target as FileReader;
        // 以二進(jìn)制流方式讀取得到整份excel表格對(duì)象
        const workbook = XLSX.read(result, { type: 'binary' });
        let data: Object[] = []; // 存儲(chǔ)獲取到的數(shù)據(jù)
        // 遍歷每張工作表進(jìn)行讀?。ㄟ@里默認(rèn)只讀取第一張表）
        for (const sheet in workbook.Sheets) {
          if (workbook.Sheets.hasOwnProperty(sheet)) {
            // 利用 sheet_to_json 方法將 excel 轉(zhuǎn)成 json 數(shù)據(jù)
            let excelData = XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
            for(let i = 0; i < excelData.length; i++){
              // 對(duì)excel 表中的密碼這一列進(jìn)行加密
              excelData[i]["密碼[必填]"] = encryptPWD(excelData[i]["密碼[必填]"]);
            }
            data = data.concat(excelData);
            workbook.Sheets[sheet] = XLSX.utils.json_to_sheet(data);
            break; // 如果只取第一張表，就取消注釋這行
          }
          console.log(data)
      }
      .catch((err) => {
          console.log(err, 'error');
      });
}
// 以二進(jìn)制方式打開(kāi)文件
fileReader.readAsBinaryString(item.file);

以上是基本的前端處理 excel 操作，還有一部分關(guān)于excel 文件下載、excel 經(jīng)過(guò)處理后再重新生成文件格式或轉(zhuǎn)換成 Blob對(duì)象 發(fā)送到服務(wù)器 和 xlsx 庫(kù)的一些基本操作，在后繼會(huì)更新進(jìn)來(lái)，目前就寫著這些先。