vue3 使用 xlsx.js 修改el-upload上传的excel文件内容

Vue3中使用xlsx.js修改`el-upload`上传的Excel文件内容通常涉及到以下几个步骤：

1. **引入库**:
首先需要在项目中安装`xlsx`库，可以使用npm或yarn命令：

   npm install xlsx

2. **处理文件上传**:
当用户通过`el-upload`组件选择了一个Excel文件后，你需要在`handleUpload`或类似的方法中读取文件数据：

   async handleUpload(file) {
     const fileReader = new FileReader();
     fileReader.readAsArrayBuffer(file);
     await new Promise((resolve) => fileReader.onload = resolve);
     const buffer = fileReader.result;
     
     // 创建一个Blob实例以便后续操作
     const workbook = XLSX.read(buffer, { type: 'binary' });
   }

3. **解析工作簿**:
使用`XLSX`库的`read`方法将二进制数据转换成工作簿对象。

4. **编辑工作表数据**:
调用`XLSX.utils.sheet_to_json`将工作表转化为JSON对象，方便操作：

   const sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
   // 这里假设你想修改第一列的内容
   for (let i = 0; i < sheetData.length; i++) {
     sheetData[i].yourColumnToModify = 'new value';
   }

5. **更新工作簿**:
根据修改后的数据生成新的工作表，并将其写回原文件：

   const updatedWorkbook = XLSX.utils.book_new();
   const updatedSheet = XLSX.utils.json_to_sheet(sheetData);
   XLSX.utils.book_append_sheet(updatedWorkbook, updatedSheet, 'Sheet1');
   
   // 再次使用读取文件的策略，这次将更新后的数据写入
   const updateFileContent = new Blob([XLSX.write(updatedWorkbook, { type: 'xlsx' })], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
   saveAs(updateFileContent, 'updated_file.xlsx');

6. **保存文件**:
最后，使用浏览器的`saveAs`函数将修改后的文件保存到本地。