当前位置：首页 > VUE

vue实现导出表格数据

2026-02-23 05:20:41VUE

Vue 导出表格数据的方法

使用 xlsx 库导出 Excel

安装 xlsx 库：

npm install xlsx --save

在 Vue 组件中引入并使用：

import XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      const table = document.getElementById('tableId'); // 替换为表格的 ID
      const workbook = XLSX.utils.table_to_book(table);
      XLSX.writeFile(workbook, 'exported_data.xlsx');
    }
  }
}

使用原生 JavaScript 导出 CSV

exportToCSV() {
  const rows = this.tableData; // 替换为表格数据
  let csvContent = "data:text/csv;charset=utf-8,";

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

  // 添加数据行
  rows.forEach(row => {
    csvContent += Object.values(row).join(",") + "\n";
  });

  const encodedUri = encodeURI(csvContent);
  const link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "exported_data.csv");
  document.body.appendChild(link);
  link.click();
}

使用第三方组件库（如 Element UI）

如果使用 Element UI 的表格组件：

vue实现导出表格数据

<el-table :data="tableData" id="exportTable">
  <!-- 表格列定义 -->
</el-table>

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

methods: {
  exportExcel() {
    import('@/vendor/Export2Excel').then(excel => {
      const tHeader = ['列1', '列2']; // 表头
      const filterVal = ['prop1', 'prop2']; // 表格数据属性
      const data = this.formatJson(filterVal, this.tableData);
      excel.export_json_to_excel({
        header: tHeader,
        data,
        filename: '导出数据'
      });
    });
  },
  formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]));
  }
}