vue 后台接口返回文件流 前端实现文件下载

已于 2022-08-30 10:43:24 修改
阅读量534 收藏
点赞数
文章标签： 前端 vue.js javascript
于 2022-08-29 16:04:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxlny/article/details/126586544
版权
本文介绍如何在Vue应用中处理后端返回的文件流，通过axios设置responseType为'blob'来接收文件，利用URL.createObjectURL转换为可下载的URL，并结合HTML的a标签模拟点击下载。同时，探讨了代码优化，包括使用URL.revokeObjectURL释放资源，以及指定文件下载名称和后缀的方法。
摘要由CSDN通过智能技术生成

html文件 绑定点击事件

<el-tag @click="downloadCsv">
        <i class="el-icon-download" />
        <span>点击下载模版</span>
</el-tag>

VUE > methods里定义方法

  // 下载模版
 downloadCsv() {
   
      this.$axios.get('/api/company', {
    responseType: 'blob' }).then(data
最低0.47元/天 解锁文章
阿龙姓张
关注
Vue - 详细实现下载后端接口返回的二进制文件流，前端下载后端接口返回的文件流并自动保存到本地，支持任何格式的文件下载（从后端拿到二进制文件流数据，前端实现点击下载功能）
王佳斌
12-08 1万+
vue，vue文件流对象下载，vue下载二进制文件流，下载二进制文件，vue调用接口获取二进制文件流如何下载到本地，下载图片图像excel word pdf ppt文件，vue后端返回二进制流-前端通过对象下载文件-图片，vue实现文件下载功能，vue下载二进制文件对象实现下载文件的超详细教程，vue使用new Blob()实现不同类型的文件下载功能，vue请求后端接口得到一大堆乱码怎么将文件下载出来，前端vue使用下载流文件，vue获取后端的Blob文件流下载文件，vue通过blob下载流文件，vue下载
vue 后台返回文件流的文件下载
qq_38778882的博客
03-24 268
【代码】vue 后台返回文件流的文件下载。
Vue处理后端返回文件流实现下载
龘
06-14 2567
Vue处理后端返回文件流实现下载文件到本地，1、在项目src目录utils下编写一个download.js文件。//请求设置responseType。//在main.js文件全局引入。
vue下载文件流
wangxiaoyanlike的博客
07-23 1119
后端返回文件流，前端进行下载 提示：以下是本篇文章正文内容，下面案例可供参考。
Vue实战【后端返回文件流时，前端如何处理并成功下载流文件】
商务合作/软件定制/学习交流
04-07 4761
Vue处理后端返回的文件流，并成功下载为文件
vue请求接口返回文件流并进行下载
annier_11的博客
09-15 6348
vue项目，有两种方式实现请求接口返回文件流并进行下载： 第一种：使用a标签的特性，使用链接实现 第二种：下载文件流的方式
vue中后端返回文件流，前端全部下载或者部分下载
weixin_43453221的博客
08-04 919
后端返回文件流，前端下载或者选择性下载前端全部下载前端选择性下载 前端全部下载 export function downCustResource (data) { return request({ baseURL: baseGEAR, url: '/business/customer/downCustResource', method: 'get', params: data, responseType: 'blob', contentType: "ap
记录后台返回base64 前端转文件下载
今天,你学习了吗?
02-01 990
需求是一个xlsl文档下载 后端返回 的是这种格式 下面直接上封装好的代码 直接调用此方式就可以 dataURLtoDownload(dataurl, name) { var bstr = atob(dataurl), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } le
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
04-22
当后端服务器处理文件上传并返回流数据时，前端需要能够接收这些流数据并将其转化为可预览或下载的格式，例如PDF。以下是三种在VueCLI3.0项目中实现PDF预览的方法： 1. **使用PDF.js库** PDF.js是Mozilla维护的一...
vue 后台返回的文件流进行预览_vue中后端做Excel导出功能返回数据流前端的处理操作...
weixin_34006342的博客
02-05 1814
项目中有一个导出功能的实现，用博客来记录一下。因为需求对导出表格的数据格式和样式有要求，所以这个导出功能放到后端来做，而且后端返回的是数据流，所以需要处理成想要的表格并导出来。先看下效果图：页面效果：点击 导出Excel 调用导出接口成功了：后台返回的数据流，一堆看不懂的乱码：接下来要处理这堆乱码，因为用到的地方多，所以在util.js文件里封装了一个公共方法并抛出：虽然vue里有封装好的请求接口...
vue实现下载文件流完整前后端代码
01-21
使用Vue时，我们前端如何处理后端返回的文件流 首先后端返回流，这里我把流的动作拿出来了，我很多地方要用 /** * 下载单个文件 * * @param docId */ @GetMapping(/download/{docId}) public void download(@PathVariable(docId) String docId, HttpServletResponse response) { outWrite(response, docId); } /** * 输出文件流 * @param response * @param do
vue上传和下载前后台开发
04-30
前端采用vue.js开发，后端使用java进行上传下载开发。
Vue3 - 详细实现下载从服务端返回的文件流 Blob 对象教程，前端下载后端接口返回的文件流并自动保存到本地，支持任何格式的文件下载（从后端拿到二进制文件流 Blob 对象，前端实现点击下载功能）
王佳斌
12-19 5556
vue3，vue3 blob对象下载，vue3下载二进制文件流，下载blob二进制文件，vue3调用接口获取二进制文件流如何下载到本地，下载图片图像excel word pdf ppt文件，vue3请求后端接口得到一大堆乱码怎么将文件下载出来，前端vue3使用blob下载流文件，vue3获取后端的Blob文件流下载文件，vue3通过blob下载流文件，vue3下载Blob文件,vue3后端返回二进制流-前端通过blob对象下载文件-图片，vue3实现文件下载功能，Vue3中利用Blob对象实现下载文件的超详
后端返回blob文件流，前端下载文件的整个过程
m0_37714008的博客
06-17 2489
后端返回blob文件流，前端下载文件的整个过程
vue 后台接口返回文件流地址的下载
qq_37916164的博客
03-11 924
首先在axios.post的请求中把默认的 " responseType:‘json’ " 改为" responseType:‘blob’ // 接口请求成功后 letblob =newBlob([res.data], {type:"application/vnd.ms-excel"});// res是接口返回的文件流 letobjectUrl = URL.createObjectURL(blob); window.location.href = objectUrl; 注...
后端返回一个文件流（blob对象），前端将其下载下来
小星落
03-05 4011
this.$axios({ url: "/api/getblob", method: "post", headers: { "Content-Type": "multipart/form-data", token: localStorage.getItem("token"), }, data: formData, responseType: "blob",//关键点
vue前端下载各类文件，后端返回的是文件流，该怎么下载？获取到文件信息？
qq_40739261的博客
10-17 3876
前端vue项目下载文件，后端后台返回的是文件流（二进制），前端操作代码该如何写。vue前端常见的文件流格式类型有哪些，怎么设置下载类型。
vue 后端返回二进制流文件，前端如何实现下载？
Start2019
12-17 7284
1. 下载时需要传token值应该怎么去做？ 2. 后台返回二进制流文件，前端怎么去实现下载？
前端根据后台返回的数据 在浏览器进行下载文件 vue代码实现
最新发布
09-14
在前端进行文件下载，通常是通过调用后台接口获取文件流，然后在浏览器端触发一个下载操作。使用Vue框架时，可以通过axios等HTTP请求库来获取后台数据，再配合一些前端JavaScript代码来实现文件的下载。以下是一个简单的示例实现： ```javascript <template> <button @click="downloadFile">下载文件</button> </template> <script> export default { methods: { downloadFile() { // 使用axios发送请求，获取文件流 axios({ url: '后台接口地址', // 请替换为实际的接口地址 method: 'GET', responseType: 'blob', // 告诉浏览器响应体是blob类型，这样文件下载时才能正确处理 timeout: 10000 }).then(response => { // 创建一个URL对象，用于读取响应的blob数据 const url = window.URL.createObjectURL(new Blob([response.data])); // 创建一个a标签用于下载 const link = document.createElement('a'); link.href = url; link.setAttribute('download', '文件名.xlsx'); // 设置下载文件名，可以包含后缀 // 把a标签添加到文档中，模拟点击实现下载 document.body.appendChild(link); link.click(); // 下载完成后移除a标签 document.body.removeChild(link); }).catch(error => { console.error('下载文件失败:', error); }); } } }; </script> ``` 在这个示例中，点击按钮会触发`downloadFile`方法。这个方法通过axios向后台请求文件数据，设置`responseType`为`blob`以确保响应数据被作为二进制数据处理。获取到文件流后，使用`window.URL.createObjectURL`创建一个可下载的URL，然后创建一个`a`标签，设置其`href`属性为这个URL，并通过设置`download`属性指定下载的文件名。最后模拟点击`a`标签触发下载，并在下载后将其从文档中移除。 请注意，根据实际需求，后台接口地址、请求方式、文件名以及请求参数等都需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值