Vue.js 中使用 js-xlsx 生成可筛选的 Excel 文件

在 Vue.js 中，可以使用 js-xlsx 库来生成 Excel 文件，并进行筛选操作。以下是在 export2excel.js 头部加入筛选的示例代码：

import { saveAs } from 'file-saver';
import XLSX from 'xlsx';

export function export2Excel(headers, data, fileName, sheetName) {
  // 创建 workbook 和 worksheet
  const workbook = XLSX.utils.book_new();
  const worksheet = XLSX.utils.json_to_sheet(data, { header: headers });

  // 添加筛选
  const filterRange = XLSX.utils.decode_range(worksheet['!ref']);
  worksheet['!autofilter'] = { ref: filterRange };

  // 将 worksheet 添加到 workbook
  XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);

  // 生成 Excel 文件并下载
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  saveAs(new Blob([excelBuffer], { type: 'application/octet-stream' }), `${fileName}.xlsx`);
}

在上述代码中，我们使用 XLSX.utils.json_to_sheet 方法将数据转换为 worksheet，并通过 XLSX.utils.book_append_sheet 方法将 worksheet 添加到 workbook 中。然后，我们使用 XLSX.utils.decode_range 方法获取工作表的范围，并通过设置 worksheet['!autofilter'] 属性来添加筛选。

最后，我们使用 XLSX.write 方法将 workbook 写入 Excel 文件，并使用 file-saver 库中的 saveAs 方法将文件保存为下载文件。

使用示例：

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

export default {
  methods: {
    handleExport() {
      const headers = ['Name', 'Age', 'Email'];
      const data = [
        { Name: 'John', Age: 25, Email: 'john@example.com' },
        { Name: 'Alice', Age: 30, Email: 'alice@example.com' },
        { Name: 'Bob', Age: 35, Email: 'bob@example.com' },
      ];
      const fileName = 'data';
      const sheetName = 'Sheet1';

      export2Excel(headers, data, fileName, sheetName);
    }
  }
}

以上示例将导出一个包含 Name、Age 和 Email 列的 Excel 文件，并在头部添加了筛选功能。