当前位置：首页 > VUE

Vue submit实现导出

2026-03-09 19:42:25VUE

Vue 中实现导出功能的方法

在 Vue 中实现导出功能通常涉及前端生成数据并触发下载，或向后端请求导出文件。以下是几种常见实现方式：

前端导出 CSV/Excel

使用 papaparse 或 xlsx 库在前端将数据导出为 CSV 或 Excel 文件：

import { saveAs } from 'file-saver';
import { json2csv } from 'papaparse';

export default {
  methods: {
    exportToCSV() {
      const data = this.tableData; // 假设这是要导出的数据
      const csv = json2csv(data);
      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
      saveAs(blob, 'export.csv');
    }
  }
}

后端导出文件

通过 API 请求后端生成的导出文件，使用 axios 或其他 HTTP 库：

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', 'export.xlsx');
        document.body.appendChild(link);
        link.click();
        link.remove();
      } catch (error) {
        console.error('Export failed:', error);
      }
    }
  }
}

使用第三方 UI 库

若使用 Element UI 等组件库，可直接调用其导出方法：

Vue submit实现导出

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

methods: {
  exportExcel() {
    import('@/vendor/Export2Excel').then(excel => {
      excel.export_json_to_excel({
        header: ['姓名', '年龄'],
        data: this.list.map(item => [item.name, item.age]),
        filename: '用户列表'
      });
    });
  }
}