当前位置：首页 > VUE

vue实现导出表格

2026-01-08 16:24:20VUE

Vue 中实现表格导出

使用 xlsx 库导出 Excel

安装 xlsx 库：

npm install xlsx --save

在 Vue 组件中引入并使用：

import XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      const table = document.getElementById('tableId');
      const workbook = XLSX.utils.table_to_book(table);
      XLSX.writeFile(workbook, 'table.xlsx');
    }
  }
}

使用 FileSaver 保存文件

安装 file-saver 库：

npm install file-saver --save

结合 xlsx 使用：

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

export default {
  methods: {
    exportToExcel() {
      const table = document.getElementById('tableId');
      const workbook = XLSX.utils.table_to_book(table);
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const data = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      saveAs(data, 'table.xlsx');
    }
  }
}

使用 html2canvas 和 jsPDF 导出 PDF

安装相关库：

npm install html2canvas jspdf --save

实现代码：

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  methods: {
    exportToPDF() {
      const table = document.getElementById('tableId');
      html2canvas(table).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF('p', 'mm', 'a4');
        pdf.addImage(imgData, 'PNG', 0, 0, 210, 297);
        pdf.save('table.pdf');
      });
    }
  }
}

使用第三方组件库

Element UI 表格导出：

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

methods: {
  exportExcel() {
    import('@/vendor/Export2Excel').then(excel => {
      const tHeader = ['列1', '列2', '列3'];
      const data = this.tableData.map(item => [item.prop1, item.prop2, item.prop3]);
      excel.export_json_to_excel({
        header: tHeader,
        data,
        filename: '表格数据'
      });
    });
  }
}

自定义 CSV 导出

纯前端实现 CSV 导出：

exportToCSV() {
  const headers = ['Name', 'Age', 'City'];
  const data = [
    ['John', '25', 'New York'],
    ['Jane', '30', 'London']
  ];

  let csvContent = "data:text/csv;charset=utf-8,";
  csvContent += headers.join(",") + "\n";
  data.forEach(row => {
    csvContent += row.join(",") + "\n";
  });

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