vue 套用项目中的xlsx模版，导出数据_vue中使用xlsx实现导出-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_49881056/article/details/131229563

文章详细描述了在Vue.js应用中如何使用xlsx插件进行Excel模板的下载、数据处理及导出。首先通过npm安装xlsx，然后将模板放入public文件夹。接着创建导出按钮，并在点击事件中调用exportData方法。该方法涉及axios获取模板文件，使用xlsx读取和处理数据，最后将处理后的数据写回工作表并生成新的Excel文件供用户下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 下载xlsx插件

npm install xlsx

2. 将xlsx模版放入public文件夹中的static文件中

3. 导出按钮

<el-button size="small" @click="exportData">导 出</el-button>

3.引入插件

import * as XLSX from 'xlsx';
import axios from 'axios';

4. 导出方法

// filterVal-要从数据获取的字段，jsonData-数组数据
formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          jsonData.map((row, index) => {
            row.index = index + 1;
          });
          return v[j];
        })
      );
    },

async exportData() {
      let fileUrl = "./static/AudioTemplate.xlsx";//在项目中放文件的地址
      const response = await axios.get(fileUrl, { responseType: 'arraybuffer' });
      const data = new Uint8Array(response.data);
      const workbook = XLSX.read(data, { type: 'array' });
      console.log(workbook, "workbook");

      // 获取第一页的数据
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];

      const sheetData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      const filterVal = ['titleName', "resourceId"];
      const updatedData = this.formatJson(filterVal, this.tableData);//处理表格数据变成二维数组

      // 合并最后一条数据并更新empty属性
      sheetData[sheetData.length - 1] = [
        ...updatedData[0],
        ...sheetData[sheetData.length - 1]
      ];
      sheetData[sheetData.length - 1].empty -= updatedData[0].length;
      updatedData.shift();// 删除第二个二维数组中的第一条数据
      const mergedArray = [...sheetData, ...updatedData]; // 合并两个二维数组WW

      // 将合并后的数据写回工作表   B1是因为xlsx模版中的数据开始是从B1的
      const mergedWorksheet = XLSX.utils.aoa_to_sheet(mergedArray, { origin: 'B1' });

      workbook.Sheets[firstSheetName] = mergedWorksheet;

      const fileData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([fileData], { type: 'application/octet-stream' });

      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', "example.xlsx");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    },