vue3 使用 xlsx.js 修改File类型对象的内容

在Vue3中，如果你想通过xlsx.js库来修改File类型对象（通常用于上传文件并作为表格数据）的内容，你需要先将文件转换成可读的数据，比如CSV或JSON，然后再使用xlsx.js处理这个数据，最后再将处理后的结果转换回新的File对象。

以下是大致步骤：

1. **读取文件内容**:
使用FileReader API读取文件内容：

   const fileInput = document.getElementById('file-input'); // 获取input元素
   fileInput.addEventListener('change', async (event) => {
     const file = event.target.files[0];
     const reader = new FileReader();
     reader.readAsText(file);
     await new Promise((resolve) => reader.onload = resolve); // 等待读取完成
     const textData = reader.result;
   });

2. **解析为Excel数据**:
使用`xlsx.read()`函数将文本数据解析成工作表：

   const workbook = XLSX.read(textData, { type: 'text' }); // type参数指明数据源类型
   const sheetName = workbook.SheetNames[0]; // 如果有多个工作表，选择其中一个
   const worksheet = workbook.Sheets[sheetName];

3. **使用xlsx.js操作数据**:
对`worksheet`对象进行操作，例如添加、删除或修改单元格值。

4. **生成新的工作簿**:
用处理后的数据创建一个新的xlsx.Workbook实例：

   const updatedWorksheet = ...; // 这里是对原始worksheet的修改操作后得到的新数据
   const updatedWorkbook = XLSX.utils.book_new();
   XLSX.utils.book_append_sheet(updatedWorkbook, updatedWorksheet, 'Sheet1');

5. **导出新文件**:
将更新的工作簿转换回文件流，然后设置为新的File对象：

   const buffer = XLSX.write(updatedWorkbook, { type: 'buffer' });
   const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
   const newFileUrl = URL.createObjectURL(blob);
   const newFile = new File([blob], 'new_file.xlsx', {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});

6. **保存或上传新的File对象**:
最后，你可以让用户下载这个新的File，或者将其上传到服务器。