Vue.js 读取 Excel 文件进行编辑添加后导出并保持模板样式

Vue.js 读取 Excel 文件进行编辑添加后导出并保持模板样式

实现该功能可以使用以下步骤:

1. 安装依赖库: xlsx 和 file-saver

npm install xlsx file-saver --save

2. **编写读取 Excel 文件的方法**

```javascript
import XLSX from 'xlsx';

function readExcelFile(file) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.readAsArrayBuffer(file);

    fileReader.onload = (e) => {
      const bufferArray = e.target.result;
      const wb = XLSX.read(bufferArray, { type: 'buffer' });
      const wsname = wb.SheetNames[0];
      const ws = wb.Sheets[wsname];
      const data = XLSX.utils.sheet_to_json(ws);
      resolve(data);
    };

    fileReader.onerror = (error) => {
      reject(error);
    };
  });
}

该方法接收一个 Excel 文件对象作为参数，使用 FileReader 对象读取文件内容，然后使用 xlsx 库的 read 方法将文件内容转换为工作簿对象。

接着，使用 SheetNames 属性访问第一个工作表的名称，使用 Sheets 属性访问该工作表对象，并使用 sheet_to_json 方法将该工作表的数据转换为 JSON 格式。

3. 编写导出 Excel 文件的方法

   import XLSX from 'xlsx';
   import FileSaver from 'file-saver';
   
   function exportExcelFile(data, fileName, sheetName) {
     const ws = XLSX.utils.json_to_sheet(data);
     const wb = XLSX.utils.book_new();
     XLSX.utils.book_append_sheet(wb, ws, sheetName);
     const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
     const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
     FileSaver.saveAs(blob, fileName);
   }
   
   function s2ab(s) {
     const buf = new ArrayBuffer(s.length);
     const view = new Uint8Array(buf);
     for (let i = 0; i < s.length; i += 1) {
       view[i] = s.charCodeAt(i) & 0xff;
     }
     return buf;
   }
   

   该方法接收三个参数：要导出的数据、文件名和工作表名称。使用 json_to_sheet 方法将数据转换为工作表对象，然后创建一个新的工作簿对象，并将该工作表对象添加到工作簿中。

   接着，使用 write 方法将工作簿对象转换为二进制格式的数据，并使用 Blob 对象创建一个文件对象，最后使用 FileSaver 库的 saveAs 方法保存文件。

4. 使用 Vue 组件实现文件上传和下载功能

   <template>
     <div>
       <input type='file' @change='handleFileUpload'>
       <button @click='handleFileDownload'>下载</button>
       <table>
         <thead>
           <tr>
             <th>姓名</th>
             <th>年龄</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for='(item, index) in tableData' :key='index'>
             <td>{{ item.name }}</td>
             <td>{{ item.age }}</td>
           </tr>
         </tbody>
       </table>
     </div>
   </template>
   
   <script>
   import { readExcelFile, exportExcelFile } from '@/utils/excel';
   
   export default {
     data() {
       return {
         tableData: [],
       };
     },
     methods: {
       async handleFileUpload(event) {
         const file = event.target.files[0];
         const data = await readExcelFile(file);
         this.tableData = data;
       },
       handleFileDownload() {
         exportExcelFile(this.tableData, 'data.xlsx', 'Sheet1');
       },
     },
   };
   </script>
   

   在该组件中，使用 input 元素实现文件上传功能，使用 @change 事件监听文件选择事件，将选择的文件传递给 readExcelFile 方法，然后将读取到的数据赋值给 tableData 属性，最后使用 v-for 指令将数据渲染到表格中。

   同时，使用 button 元素实现文件下载功能，使用 @click 事件监听下载按钮点击事件，调用 exportExcelFile 方法将数据导出为 Excel 文件，并保存到本地。

保持模板样式

要保持模板样式，需要使用 xlsx 库的 sheet_to_json 和 json_to_sheet 方法时指定 header 参数。例如：

// 读取 Excel 文件时指定 header 参数
const data = XLSX.utils.sheet_to_json(ws, { header: 1 });

// 导出 Excel 文件时指定 header 参数
const ws = XLSX.utils.json_to_sheet(data, { header: 1 });

这样就能确保生成的 Excel 文件的列名和原始文件一致，从而保持模板样式。