vue导出excel文件前端如何接受下载后端传来的excel

在Vue.js中，前端导出Excel并接收后端返回的数据通常涉及到以下几个步骤：

1. **前端处理**：
- 使用JavaScript库，比如`js-xlsx`或`xlsx-style`等来创建Excel工作表，并填充数据。
- 创建一个文件流或Blob对象，将生成的工作表转换成可以下载的Excel文件。

import XLSX from 'xlsx';

// 假设data是一个数组表示需要导出的表格数据
const workbook = {
  SheetNames: ['Sheet1'],
  Sheets: {
    Sheet1: {
      data: data,
    },
  },
};

// 将工作簿转换为Blob
const blob = XLSX.write(workbook, { type: 'blob' });

2. **发送请求到后端**：
- 使用Vue的axios、fetch或其他HTTP客户端，将Blob对象作为响应体发送到后端，告诉后端你需要下载这个文件。

axios.post('/export-excel', {
  filename: 'report.xlsx', // 可自定义文件名
  file: blob,
}).then(response => {
  if (response.data.success) {
    const downloadLink = URL.createObjectURL(response.data.content);
    const aElement = document.createElement('a');
    aElement.href = downloadLink;
    aElement.download = response.data.filename;
    aElement.click();
  }
});

3. **后端处理**：
- 后端接收到请求后，可以使用Node.js的`file-type`库检测文件类型，确认是Excel后，将其转化为流，设置Content-Type和Content-Disposition头信息，然后响应给前端。

const fs = require('fs');
const fileType = require('file-type');

// 检查后端返回的内容是否为Excel
if (fileType.parse(response.data.content)['type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
  res.header('Content-Disposition', `attachment; filename=${filename}`);
  res.header('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
  res.send(response.data.content);
}