vue导出excel

方法一:只需要一个sheet

1. 安装file-saver和xlsx库(如果xlsx使用无效则可能是版本原因)

npm install file-saver xlsx --save

2. 创建一个方法，在该方法中构建需要导出的数据，并将其保存为.xlsx文件。

// 导入依赖库
import XLSX from 'xlsx';
import FileSaver from 'file-saver';

// 在组件中定义需要导出的数据
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 30, gender: '女' },
        { name: '王五', age: 40, gender: '男' }
      ]
    }
  },
  methods: {
    exportExcel() {
      // 构建表格数据
      const header = ['姓名', '年龄', '性别'];
      const data = this.tableData.map(item => [item.name, item.age, item.gender]);
      const worksheet = XLSX.utils.aoa_to_sheet([header, ...data]);

      // 创建工作簿并保存到本地
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const date = new Date().toLocaleDateString();
      const fileName = `表格-${date}.xlsx`;
      const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
      FileSaver.saveAs(blob, fileName);
    }
  }
}

3. 在组建中使用

<template>
  <div>
    <el-button @click="exportExcel">导出Excel</el-button>
  </div>
</template>

方法二;需要多个sheet

1. 安装依赖库

npm install file-saver xlsx --save

2. 创建方法以生成和导出Excel文件

import XLSX from 'xlsx';
import FileSaver from 'file-saver';

export default {
  data() {
    return {
      sheetNames: ['Sheet1', 'Sheet2', 'Sheet3'],
      sheetsData: [
        [
          ['姓名', '性别', '年龄'],
          ['李雷', '男', '18'],
          ['韩梅梅', '女', '19']
        ],
        [
          ['编号', '类型', '价格'],
          ['001', '电脑', '5000'],
          ['002', '手机', '3000']
        ],
        [
          ['日期', '销售额'],
          ['2022-01-01', '10000'],
          ['2022-01-02', '15000']
        ]
      ]
    }
  },
  methods: {
    exportExcel() {
      const wb = XLSX.utils.book_new();
      for (let i = 0; i < this.sheetNames.length; i++) {
        const ws = XLSX.utils.aoa_to_sheet(this.sheetsData[i]);
        XLSX.utils.book_append_sheet(wb, ws, this.sheetNames[i]);
      }
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
      const fileName = 'example.xlsx';
      FileSaver.saveAs(new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' }), fileName);
    },
    s2ab(s) {
      const buf = new ArrayBuffer(s.length);
      const view = new Uint8Array(buf);
      for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
      return buf;
    }
  }
}

3. 在模板中创建一个按钮，并将其绑定到导出Excel的方法上

<template>
  <div>
    <el-button @click="exportExcel">导出Excel</el-button>
  </div>
</template>

这里，我们将导出的Excel文件命名为"example.xlsx"，其中包括三个工作表：Sheet1、Sheet2和Sheet3。每个工作表都有自己的数据。在实际应用中，你可以使用自己的数据和工作表名称来替换示例代码中的数据。