当前位置：首页 > 前端教程

elementui导出

2026-03-05 18:19:31前端教程

导出表格数据为Excel

使用Element UI的表格组件结合第三方库（如xlsx和file-saver）实现导出功能。

安装依赖库：

npm install xlsx file-saver --save

代码示例：

elementui导出

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

exportTableToExcel() {
  const tableData = this.tableData; // 表格数据
  const header = Object.keys(tableData[0]); // 表头
  const data = tableData.map(row => header.map(key => row[key])); // 数据

  const ws = XLSX.utils.aoa_to_sheet([header, ...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/octet-stream' });
  saveAs(blob, 'export.xlsx');
}

导出表格为CSV

利用原生JavaScript实现CSV导出：

exportTableToCSV() {
  const tableData = this.tableData;
  const header = Object.keys(tableData[0]);
  const csv = [
    header.join(','),
    ...tableData.map(row => header.map(key => `"${row[key]}"`).join(','))
  ].join('\n');

  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'export.csv';
  link.click();
}

使用Element UI的打印功能

通过浏览器原生打印API实现表格打印：

elementui导出

printTable() {
  const printContent = document.getElementById('printTable').innerHTML;
  const originalContent = document.body.innerHTML;

  document.body.innerHTML = printContent;
  window.print();
  document.body.innerHTML = originalContent;
}

HTML部分需要包裹打印区域：

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

导出特定列数据

通过过滤表格列实现选择性导出：

exportSelectedColumns(columns) {
  const filteredData = this.tableData.map(row => {
    const filteredRow = {};
    columns.forEach(col => {
      filteredRow[col] = row[col];
    });
    return filteredRow;
  });

  // 使用前面介绍的Excel或CSV导出方法
  // 将filteredData作为数据源
}

处理大数据量导出

对于大数据量表格，建议采用分页或分块导出：

async exportLargeData() {
  const pageSize = 1000;
  const totalPages = Math.ceil(this.totalData.length / pageSize);

  for (let page = 1; page <= totalPages; page++) {
    const chunk = this.totalData.slice(
      (page - 1) * pageSize,
      page * pageSize
    );
    // 导出当前分块数据
    await this.exportChunk(chunk, page);
  }
}

标签: elementui