当前位置：首页 > VUE

vue 实现导出

2026-02-10 05:52:56VUE

Vue 实现导出功能的方法

在 Vue 中实现导出功能通常涉及前端生成文件并下载，或与后端 API 交互获取文件。以下是几种常见的实现方式：

前端生成 Excel 文件（使用 xlsx 库）

安装依赖库：

vue 实现导出

npm install xlsx

代码示例：

import * as XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      const data = [
        ['Name', 'Age', 'Email'],
        ['John', 28, 'john@example.com'],
        ['Jane', 24, '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, 'export.xlsx');
    }
  }
}

前端生成 CSV 文件

无需额外库，直接生成 CSV 字符串：

vue 实现导出

export default {
  methods: {
    exportToCSV() {
      const csvContent = "data:text/csv;charset=utf-8," 
        + "Name,Age,Email\n"
        + "John,28,john@example.com\n"
        + "Jane,24,jane@example.com";
      const encodedUri = encodeURI(csvContent);
      const link = document.createElement('a');
      link.setAttribute('href', encodedUri);
      link.setAttribute('download', 'export.csv');
      document.body.appendChild(link);
      link.click();
    }
  }
}

通过后端 API 导出文件

假设后端返回文件流：

export default {
  methods: {
    async exportFromBackend() {
      try {
        const response = await axios.get('/api/export', {
          responseType: 'blob'
        });
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.pdf');
        document.body.appendChild(link);
        link.click();
      } catch (error) {
        console.error('Export failed:', error);
      }
    }
  }
}

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

Element UI 的 el-table 支持导出：

<el-table :data="tableData" ref="table">
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
</el-table>
<el-button @click="exportTable">Export</el-button>

methods: {
  exportTable() {
    import('@/vendor/Export2Excel').then(excel => {
      const tHeader = ['Name', 'Age'];
      const data = this.tableData.map(item => [item.name, item.age]);
      excel.export_json_to_excel({ header: tHeader, data, filename: 'table' });
    });
  }
}