前端需要对 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 库的一些基本操作，在后继会更新进来，目前就写着这些先。
