vue表格实现导出

Vue 表格导出实现方法

使用 xlsx 库导出 Excel

安装 xlsx 库

npm install xlsx

引入 xlsx 并实现导出功能

import * as XLSX from 'xlsx';

export default {
  methods: {
    exportExcel() {
      const data = this.tableData; // 表格数据
      const ws = XLSX.utils.json_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      XLSX.writeFile(wb, "export.xlsx");
    }
  }
}

使用 FileSaver 实现文件下载

安装 FileSaver

npm install file-saver

结合 xlsx 使用

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

export default {
  methods: {
    exportExcel() {
      const data = this.tableData;
      const ws = XLSX.utils.json_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      saveAs(blob, "export.xlsx");
    }
  }
}

导出 CSV 格式

直接使用 JavaScript 实现

export default {
  methods: {
    exportCSV() {
      const data = this.tableData;
      let csvContent = "data:text/csv;charset=utf-8,";

      // 添加表头
      const headers = Object.keys(data[0]);
      csvContent += headers.join(",") + "\r\n";

      // 添加数据行
      data.forEach(row => {
        csvContent += headers.map(header => row[header]).join(",") + "\r\n";
      });

      // 创建下载链接
      const encodedUri = encodeURI(csvContent);
      const link = document.createElement("a");
      link.setAttribute("href", encodedUri);
      link.setAttribute("download", "export.csv");
      document.body.appendChild(link);
      link.click();
    }
  }
}

使用 Element UI 表格导出

针对 Element UI 的表格组件

export default {
  methods: {
    exportElementTable() {
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['列名1', '列名2', '列名3']; // 表头
        const filterVal = ['prop1', 'prop2', 'prop3']; // 表格数据属性
        const data = this.formatJson(filterVal, this.tableData);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '导出文件',
          autoWidth: true,
          bookType: 'xlsx'
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }
  }
}

注意事项

确保表格数据是数组格式，且每个对象具有相同的属性结构

处理中文乱码问题时，可以在导出时指定编码格式

对于大数据量导出，建议分批次处理或使用Web Worker

导出的文件名可以动态生成，如包含当前日期

const fileName = `数据导出_${new Date().toLocaleDateString()}.xlsx`;