解决Vue前端接收后端easyExcel导出接口传过来的文件流，获取导出文件名
2023-11-21 13:29:59
轻松解决 Vue 中无法从后端获取文件名的难题：一份逐步指南
在使用 Vue 前端接收后端 easyExcel 导出接口传来的文件流时，你可能会遇到一个令人抓狂的问题：无法从请求头中获取 Content-Disposition 信息，从而无法确定导出文件的名称。别担心！本指南将一步步带你解决这个难题。
步骤 1：准备就绪
首先，你需要在项目中安装必要的依赖项：
npm install --save axios
然后，在你的组件中导入 axios 库：
import axios from 'axios';
步骤 2：请求导出
接下来，创建一个函数来向后端发送导出请求：
export default {
methods: {
exportData() {
axios({
url: '/export',
method: 'GET',
responseType: 'blob',
}).then((response) => {
// ...
});
},
},
};
在这个函数中，我们将发送一个 GET 请求到后端导出接口，并指定我们想要接收一个二进制大对象 (blob) 作为响应。
步骤 3：获取文件名
在收到后端的响应后，我们需要从请求头中提取文件名信息。我们可以使用以下代码：
const fileName = response.headers['content-disposition'].split('filename=')[1];
这会将请求头中的 Content-Disposition 字段拆分为一个数组，其中第二个元素就是文件名。
步骤 4：下载文件
有了文件名，我们就可以使用文件流和文件名来下载文件了：
const link = document.createElement('a');
link.href = URL.createObjectURL(fileStream);
link.download = fileName;
link.click();
这段代码将创建一个虚拟链接，指向文件流，并指定下载时的文件名。当我们点击这个链接时，文件就会开始下载。
步骤 5：部署你的代码
最后，运行你的项目，你应该会看到一个“导出数据”按钮。点击它，后端将生成一个文件，Vue 前端将自动下载并指定正确的文件名。
常见问题解答
1. 为什么我无法从后端获取文件名？
可能是因为后端没有在响应头中设置 Content-Disposition 字段。请检查你的后端代码，确保它正确设置了此字段。
2. 我收到一个错误“未定义的请求头”。
这意味着服务器没有在响应中设置 Content-Disposition 字段。请检查你的后端代码。
3. 下载的文件名不正确。
确保你正确地解析了 Content-Disposition 字段。它应该以 "filename=" 开头，后面跟着文件名。
4. 下载的文件空白。
可能是因为文件流为空或损坏。请检查你的后端代码以确保它正确生成文件。
5. 我想自定义下载文件名。
你可以在创建虚拟链接时指定一个自定义文件名：
link.download = 'my-custom-file-name.xls';
通过遵循这些步骤，你就可以轻松地在 Vue 前端接收和下载后端 easyExcel 导出的文件，并使用正确的文件名。
