vue实现报表的下载

使用axios和Blob对象下载报表

在Vue中实现报表下载功能，可以通过axios发起请求获取文件数据，利用Blob对象和URL.createObjectURL方法生成下载链接。

安装axios依赖：

npm install axios

在Vue组件中实现下载方法：

import axios from 'axios';

export default {
  methods: {
    downloadReport() {
      axios({
        method: 'get',
        url: '/api/report/download',
        responseType: 'blob'
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'report.xlsx');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }).catch(error => {
        console.error('下载失败:', error);
      });
    }
  }
}

使用FileSaver.js简化下载流程

FileSaver.js库可以简化文件保存操作，避免手动创建DOM元素。

安装FileSaver.js：

npm install file-saver

使用示例：

import { saveAs } from 'file-saver';
import axios from 'axios';

export default {
  methods: {
    downloadReport() {
      axios.get('/api/report/download', {
        responseType: 'blob'
      }).then(response => {
        saveAs(new Blob([response.data]), 'report.pdf');
      });
    }
  }
}

处理后端返回的文件流

当后端返回文件流时，需要正确设置请求头和处理响应：

downloadReport() {
  axios({
    url: '/api/report/export',
    method: 'POST',
    data: { /* 请求参数 */ },
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(res => {
    const contentDisposition = res.headers['content-disposition'];
    const fileName = contentDisposition.split('filename=')[1];
    const blob = new Blob([res.data]);
    const downloadUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = fileName;
    a.click();
    URL.revokeObjectURL(downloadUrl);
  });
}

处理大文件下载进度

对于大文件下载，可以添加进度提示：

downloadReport() {
  axios({
    method: 'get',
    url: '/api/large-report',
    responseType: 'blob',
    onDownloadProgress: progressEvent => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      console.log(`下载进度: ${percentCompleted}%`);
    }
  }).then(response => {
    // 处理下载完成
  });
}

前端生成报表并下载

如果需要在前端生成报表后下载，可以使用jsPDF或xlsx等库：

安装xlsx：

npm install xlsx

生成Excel示例：

import * as XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      const data = [
        ['姓名', '年龄', '城市'],
        ['张三', 28, '北京'],
        ['李四', 32, '上海']
      ];

      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, '报表.xlsx');
    }
  }
}

处理不同文件类型

根据不同的文件类型设置正确的MIME类型：

getMimeType(ext) {
  const types = {
    pdf: 'application/pdf',
    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    csv: 'text/csv',
    png: 'image/png'
  };
  return types[ext] || 'application/octet-stream';
}

downloadFile(fileName) {
  const ext = fileName.split('.').pop();
  axios.get(`/api/files/${fileName}`, {
    responseType: 'blob'
  }).then(response => {
    const blob = new Blob([response.data], { type: this.getMimeType(ext) });
    saveAs(blob, fileName);
  });
}

注意事项

确保后端API正确设置了Content-Disposition响应头，浏览器才能正确识别文件名：

Content-Disposition: attachment; filename="report.xlsx"

对于需要认证的请求，确保在请求头中添加了认证信息：

headers: {
  'Authorization': `Bearer ${token}`
}

跨域请求时，后端需要配置CORS策略，允许文件下载：

Access-Control-Expose-Headers: Content-Disposition