当前位置：首页 > VUE

vue中实现文件导出

2026-02-21 12:25:08VUE

使用 Blob 对象和 URL.createObjectURL

在 Vue 中可以通过创建 Blob 对象生成文件内容，利用 URL.createObjectURL 生成下载链接。通过动态创建 <a> 标签触发下载。

exportFile(content, fileName, fileType) {
  const blob = new Blob([content], { type: fileType });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

使用 FileSaver.js 库

FileSaver.js 是处理文件下载的常用库，简化了保存文件的操作流程。首先需要安装依赖：

npm install file-saver

然后在组件中使用：

import { saveAs } from 'file-saver';

exportFile(content, fileName) {
  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
  saveAs(blob, fileName);
}

导出 CSV 格式文件

处理表格数据导出为 CSV 格式时，需要注意格式化数据和添加 BOM 头解决中文乱码问题：

vue中实现文件导出

exportCSV(data, fileName) {
  let csvContent = '\uFEFF';
  data.forEach(row => {
    csvContent += row.join(',') + '\r\n';
  });
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  saveAs(blob, fileName);
}

导出 Excel 文件（使用 xlsx 库）

对于复杂的 Excel 导出，可以使用 sheetjs/xlsx 库：

npm install xlsx

实现代码：

vue中实现文件导出

import XLSX from 'xlsx';

exportExcel(data, fileName) {
  const ws = XLSX.utils.json_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  XLSX.writeFile(wb, fileName);
}

处理大数据量导出

当需要导出大量数据时，建议采用分块处理方式：

async exportLargeData(data, fileName, chunkSize = 10000) {
  const chunks = Math.ceil(data.length / chunkSize);
  let fullContent = '';

  for (let i = 0; i < chunks; i++) {
    const chunk = data.slice(i * chunkSize, (i + 1) * chunkSize);
    fullContent += this.formatChunk(chunk);
    await new Promise(resolve => setTimeout(resolve, 0));
  }

  const blob = new Blob([fullContent], { type: 'text/csv;charset=utf-8;' });
  saveAs(blob, fileName);
}

服务器端文件导出

从服务器获取文件时，可以直接使用响应内容：

axios.get('/api/export', {
  responseType: 'blob'
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'exported_file.pdf');
  document.body.appendChild(link);
  link.click();
});

添加导出进度提示

对于耗时较长的导出操作，可以添加进度提示：

exportWithProgress(data) {
  this.exportProgress = 0;
  const total = data.length;
  let processed = 0;

  const interval = setInterval(() => {
    processed += 100;
    this.exportProgress = Math.min(100, Math.round((processed / total) * 100));
    if (processed >= total) clearInterval(interval);
  }, 300);

  // 实际导出逻辑
  setTimeout(() => {
    this.exportFile(data, 'data.txt');
    clearInterval(interval);
  }, 1500);
}