前端处理excel 文件

前端需要对 excel 文件进行读取并操作，通常借助第三方开源框架 xlsx.js 来实现。

xlsx.js 的基本引用

//npm 引入 xlsx.js 库
npm install xlsx

//若项目使用 ts， 则需要在 shims-vue.d.ts 中对 xlsx 进行声明
declare module 'xlsx';

// 还需要在 webpack 中对 xlsx 中使用的模块进行 externals 。 拿 vue-cli 脚手架进行举例
// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      './cptable': 'var cptable',
      '../xlsx.js': 'var _XLSX'
    }
  },
}

//在相关文件中引用该库
import XLSX from 'xlsx'

// 把读取 file 文件
 const fileReader = new FileReader();
fileReader.onload = event => {
     try {
        const { result } = event.target as FileReader;
        // 以二进制流方式读取得到整份excel表格对象
        const workbook = XLSX.read(result, { type: 'binary' });
        let data: Object[] = []; // 存储获取到的数据
        // 遍历每张工作表进行读取（这里默认只读取第一张表）
        for (const sheet in workbook.Sheets) {
          if (workbook.Sheets.hasOwnProperty(sheet)) {
            // 利用 sheet_to_json 方法将 excel 转成 json 数据
            let excelData = XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
            for(let i = 0; i < excelData.length; i++){
              // 对excel 表中的密码这一列进行加密
              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');
      });
}
// 以二进制方式打开文件
fileReader.readAsBinaryString(item.file);

以上是基本的前端处理 excel 操作，还有一部分关于excel 文件下载、excel 经过处理后再重新生成文件格式或转换成 Blob对象 发送到服务器 和 xlsx 库的一些基本操作，在后继会更新进来，目前就写着这些先。