vue封装方法导出excel文件导出的文件添加样式添加头部筛选

要在Vue中封装一个方法来导出Excel文件并添加样式和头部筛选，你可以使用第三方库xlsx来处理Excel文件的创建和导出。

首先，安装xlsx库：

npm install xlsx

然后，在你的Vue组件中引入xlsx库和FileSaver库（用于保存文件）：

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

接下来，创建一个封装的方法来导出Excel文件：

exportExcel(data, filename) {
  const worksheet = XLSX.utils.json_to_sheet(data);

  // 添加样式
  const headerCellStyle = { font: { bold: true } };
  const range = XLSX.utils.decode_range(worksheet['!ref']);
  for (let i = range.s.r; i <= range.e.r; i++) {
    const headerCell = XLSX.utils.encode_cell({ r: i, c: range.s.c });
    if (!worksheet[headerCell].s) {
      worksheet[headerCell].s = headerCellStyle;
    }
  }

  // 添加头部筛选
  range.s.r += 1; // 跳过第一行的标题
  worksheet['!autofilter'] = { ref: XLSX.utils.encode_range(range) };

  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

  // 保存文件
  saveAs(blob, filename);
}

在上面的代码中，data参数是要导出的数据，filename参数是要保存的文件名。

使用该方法时，你可以将要导出的数据传递给exportExcel方法，并指定要保存的文件名。

export default {
  // ...
  methods: {
    handleExport() {
      const data = [
        { name: 'John', age: 30, city: 'New York' },
        { name: 'Jane', age: 25, city: 'San Francisco' },
        // ...
      ];

      this.exportExcel(data, 'exported_data.xlsx');
    }
  }
  // ...
}

当你调用handleExport方法时，它将导出一个名为exported_data.xlsx的Excel文件，其中包含你提供的数据，并且包含样式和头部筛选。

请注意，这只是一个简单的示例，你可以根据你的需求对导出的Excel文件进行更复杂的自定义