使用XLSX实现前端操作excel文件

在React前端中，您可以使用第三方库来实现读取Excel文件、对其进行修改，然后下载修改后的文件。一种常见的方法是使用xlsx库，它允许您处理Excel文件。以下是一个基本的步骤：

1. 安装xlsx库：

   在React项目中，首先需要安装xlsx库。可以使用npm或yarn进行安装：

   npm install xlsx
   # 或
   yarn add xlsx
   

2. 读取Excel文件：

   使用xlsx库的readFile函数来读取Excel文件。您可以创建一个文件输入元素，并监听其onChange事件以获取所选文件。

   import XLSX from 'xlsx';
   
   function handleFileChange(event) {
     const file = event.target.files[0];
   
     if (file) {
       const reader = new FileReader();
       reader.onload = (e) => {
         const data = new Uint8Array(e.target.result);
         const workbook = XLSX.read(data, { type: 'array' });
         const sheetName = workbook.SheetNames[0];
         const sheet = workbook.Sheets[sheetName];
   
         // 在这里可以处理读取到的数据
       };
       reader.readAsArrayBuffer(file);
     }
   }
   

3. 修改Excel数据：

   在reader.onload回调中，您可以使用sheet对象来访问Excel数据并进行修改。

4. 下载修改后的文件：

   若要下载修改后的文件，您可以使用xlsx库的writeFile函数，将修改后的数据写入新的Excel文件，并提供下载链接给用户。

   const modifiedData = /* 在这里放置修改后的数据 */;
   const modifiedSheet = XLSX.utils.json_to_sheet(modifiedData);
   const modifiedWorkbook = XLSX.utils.book_new();
   XLSX.utils.book_append_sheet(modifiedWorkbook, modifiedSheet, 'Modified Sheet');
   XLSX.writeFile(modifiedWorkbook, 'modified_file.xlsx');
   

   您可以将下载链接提供给用户，或者自动触发下载：

   const modifiedData = /* 修改后的数据 */;
   const modifiedSheet = XLSX.utils.json_to_sheet(modifiedData);
   const modifiedWorkbook = XLSX.utils.book_new();
   XLSX.utils.book_append_sheet(modifiedWorkbook, modifiedSheet, 'Modified Sheet');
   XLSX.writeFileAsync(modifiedWorkbook, 'modified_file.xlsx', (blob) => {
     const url = window.URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
     a.download = 'modified_file.xlsx';
     a.click();
     window.URL.revokeObjectURL(url);
   });
   

请注意，上述示例中的代码是一个简化版本，实际应用中可能需要更多的错误处理和数据处理