当前位置：首页 > VUE

vue实现点击下载报表

2026-02-25 07:29:50VUE

实现点击下载报表功能

在Vue中实现点击下载报表功能，可以通过前端直接生成或从后端获取文件数据。以下是几种常见方法：

前端生成并下载文件

使用Blob对象和URL.createObjectURL方法生成文件并触发下载：

downloadCSV() {
  const csvContent = "data1,data2,data3\nvalue1,value2,value3";
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'report.csv';
  link.click();
  URL.revokeObjectURL(link.href);
}

从后端API下载文件

当需要从服务器获取报表文件时，可以使用axios或fetch：

downloadReport() {
  axios.get('/api/report', {
    responseType: 'blob'
  }).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.download = 'report.xlsx';
    link.click();
    window.URL.revokeObjectURL(url);
  });
}

使用FileSaver.js库

安装file-saver库可以简化下载过程：

npm install file-saver

import { saveAs } from 'file-saver';

downloadFile() {
  const fileData = new Blob([content], {type: 'text/plain;charset=utf-8'});
  saveAs(fileData, 'report.txt');
}

处理大文件下载

对于大文件，建议显示下载进度：

axios.get('/api/large-report', {
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(percentCompleted);
  }
}).then(response => {
  // 处理下载
});

注意事项