Vue 导出 Excel 文件并添加样式和头部筛选 - 使用 export2Excel.js

要在 Vue 中导出 Excel 文件并添加样式和头部筛选，可以使用第三方库 xlsx 和 file-saver。首先，安装这两个库：

npm install xlsx file-saver --save

然后，创建一个名为 export2Excel.js 的文件，添加以下代码：

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

export function export2Excel(headers, data, fileName = 'excel') {
  const worksheet = XLSX.utils.json_to_sheet(data);

  for (let i = 0; i < headers.length; i++) {
    const header = headers[i];
    worksheet[`${String.fromCharCode(65 + i)}1`].v = header.title;
    
    // 添加样式
    const cell = worksheet[`${String.fromCharCode(65 + i)}1`];
    cell.s = {
      font: {
        bold: true
      }
    };
  }

  const workbook = {
    Sheets: {
      'Sheet1': worksheet
    },
    SheetNames: ['Sheet1']
  };

  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

  const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });

  FileSaver.saveAs(blob, `${fileName}.xlsx`);
}

现在，你可以在 Vue 组件中使用 export2Excel 函数来导出 Excel 文件。例如，在一个按钮的点击事件处理程序中，你可以这样使用它：

import { export2Excel } from '@/export2Excel.js';

export default {
  methods: {
    handleExportExcel() {
      const headers = [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' },
        { title: '性别', key: 'gender' }
      ];

      const data = [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' }
      ];

      export2Excel(headers, data, '员工信息');
    }
  }
}

这样点击按钮时，会导出一个名为"员工信息.xlsx"的 Excel 文件，其中包含了样式和头部筛选。