从后端提供的文件下载接口下载文件的方式

本文描述了一个项目中遇到的文件下载接口问题,详细介绍了从发现问题、尝试解决到最终定位问题并修复的过程。通过对比不同调用方式,揭示了ajax请求在处理文件下载时的局限性,并分享了解决方案。

背景

最近的项目要把一个模块从返回页面和数据的模式改为接口返回数据的模式,去掉session验证提供给第三方使用。其中一个页面里有文件下载的功能,参照现有的方法完成代码逻辑的编写,之后用postman做测试,发现这个文件下载的接口并不能正常使用
在这里插入图片描述

尝试解决问题

  • 开始我以为是postman不支持从接口下载文件,于是写了测试页面,在页面中用Ajax方式发送请求,想要下载文件,结果从接口的返回数据来看,还是返回了一大段的乱码。
  • 两种方式都返回同样的乱码,让我怀疑是接口写的有问题,于是在做过登陆操作,有了session信息后用同样的方法调用原来的接口,结果同样没有下载文件,同样是返回了乱码。
  • 定位问题出现在接口的调用方式上。

解决方式

从网上查到问题的原因:由于ajax函数的返回类型只有text、json、xml类型(dataType:“TEXT”、“JSON”、“XML”),没有“流”类型,所以通过ajax去请求该接口是无法下载文件的。所以我们创建一个新的form元素来请求接口。
在这里插入图片描述

总结

在之前的项目中也做过下载文件的功能,但当时的路径都是txt、doc这种直接到资源的URI,所以直接给个a链接就能下载了,第一次遇到这样调用的下载文件接口,记录一下。

### Vue 前端实现后端文件下载接口的调用方法 在实际开发中,Vue 前端可以通过 Axios 或其他 HTTP 请求库来调用后端提供文件下载接口。以下是具体的实现方式: #### 1. 配置 Axios 的 `responseType` 参数 当从后端获取文件时,由于文件通常是以二进制流的形式返回,因此需要设置 Axios 的 `responseType` 参数为 `"blob"`,以便正确接收并解析数据。 ```javascript import axios from 'axios'; const downloadFile = (url, params) => { return axios({ url, method: 'get', params, responseType: 'blob' // 设置响应类型为 blob }); }; ``` 此部分逻辑来源于对文件下载接口的理解以及相关实践[^4]。 #### 2. 处理后端返回的数据 一旦成功接收到后端返回的文件流(Blob 对象),可以将其转换为 URL 并触发浏览器的下载行为。 ```javascript downloadFile('/api/download', { fileId: 123 }).then(response => { const contentDisposition = response.headers['content-disposition']; let fileName = ''; if (contentDisposition && contentDisposition.includes('filename=')) { fileName = decodeURI(contentDisposition.substring(contentDisposition.indexOf('=') + 1)); } const blob = new Blob([response.data]); const link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = fileName || 'defaultFileName'; // 如果未指定文件名,则使用默认名称 link.click(); }); ``` 上述代码片段展示了如何提取文件名并通过创建临时链接方式完成文件下载操作[^5]。 #### 3. 使用代理解决跨域问题 如果前后端分离部署,在访问后端接口时可能会遇到跨域问题。此时可以在 Vue 开发环境下的配置文件中添加代理规则,将请求转发至真实的后端地址。 ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 替换为目标后端服务的实际地址 changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 这部分内容基于常见的开发经验及引用中的描述[^1]。 --- ### 完整示例代码 以下是一个完整的 Vue 组件示例,展示如何通过按钮点击事件触发文件下载功能。 ```html <template> <button @click="handleDownload">下载文件</button> </template> <script> import axios from 'axios'; export default { methods: { handleDownload() { this.downloadFile('/api/download', { fileId: 123 }); }, downloadFile(url, params) { axios({ url, method: 'get', params, responseType: 'blob' }).then(response => { const contentDisposition = response.headers['content-disposition']; let fileName = ''; if (contentDisposition && contentDisposition.includes('filename=')) { fileName = decodeURI(contentDisposition.substring(contentDisposition.indexOf('=') + 1)); } const blob = new Blob([response.data]); const link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = fileName || 'defaultFileName'; link.click(); }); } } } </script> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值