当前位置：首页 > VUE

vue实现导出数据

2026-03-29 05:19:08VUE

使用 `xlsx` 库导出 Excel 数据

安装 xlsx 库：

npm install xlsx

在 Vue 组件中引入并使用：

import * as XLSX from 'xlsx';

methods: {
  exportToExcel() {
    const data = [
      ['Name', 'Age', 'Email'],
      ['John', 25, 'john@example.com'],
      ['Jane', 30, 'jane@example.com']
    ];

    const ws = XLSX.utils.aoa_to_sheet(data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, 'exported_data.xlsx');
  }
}

使用 `file-saver` 和 `xlsx` 导出

安装依赖：

vue实现导出数据

npm install file-saver xlsx

实现代码：

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

methods: {
  exportData() {
    const data = this.tableData; // 假设这是要导出的数据
    const worksheet = XLSX.utils.json_to_sheet(data);
    const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    const blob = new Blob([excelBuffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
    saveAs(blob, 'data_export.xlsx');
  }
}

导出 CSV 格式数据

简单实现方法：

vue实现导出数据

methods: {
  exportToCSV() {
    const data = [
      ['Name', 'Age', 'Email'],
      ['John', 25, 'john@example.com'],
      ['Jane', 30, 'jane@example.com']
    ];

    let csvContent = data.map(row => row.join(',')).join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.setAttribute('download', 'export.csv');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

使用 Element UI 的表格导出功能

如果使用 Element UI，可以利用其内置方法：

methods: {
  exportTable() {
    import('@/vendor/Export2Excel').then(excel => {
      const tHeader = ['姓名', '年龄', '地址'];
      const filterVal = ['name', 'age', 'address'];
      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]));
  }
}

导出 PDF 格式

安装 html2canvas 和 jspdf：

npm install html2canvas jspdf

实现代码：

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

methods: {
  exportToPDF() {
    const element = document.getElementById('pdf-content');
    html2canvas(element).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF();
      pdf.addImage(imgData, 'PNG', 0, 0);
      pdf.save('export.pdf');
    });
  }
}