vue.js接收并下载文件流(blob对象)
在vue框架中,与传统的根据路径下载文件(document.getElementById("").src=‘’)方式不同,有时候,我们会需要将上传的文件在后台直接进行处理再回传到前端,这种情况下文件没有实际的可获取的路径,无法通过链接方式下载。但是可以通过将其转成blob对象,添加到iframe标签中来模拟下载(或者pdf预览)。具体的接收方式如下
1.首先设置responseType对象格式为 blob:
responseType:'blob'
2.获取请求返回的response对象中的blob
var blob=response.body
3.创建一个临时的url指向blob对象
#URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.
var url = window.URL.createObjectURL(blob);
#设置文件类型,这里以excel为例blob.type = "application/excel";
#创建url之后可以模拟对此文件对象的一系列操作,例如:预览、下载
var a = document.createElement('a'); a.href = url; a.download = 'test.xlsx'; a.click();
4.释放这个临时的对象url
window.URL.revokeObjectURL(url);
#URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法.
转载于:https://www.cnblogs.com/raymond-yan/p/10364120.html
vue.js接收并下载文件流(blob对象)相关推荐
- 前端接收并下载文件流 (blob对象)(word/.doc)
1 根据文件路径下载文件模板,前端拿到的是stream 文件流 2 将文件流下载下来 第一步 当然是写请求方法了,如下 //下载模板 export function download (params) ...
- vue-axios下载文件流blob,ie下载报传递给系统调用的数据区域太小.ie文件流下载报错;文件下载失败将blob的错误信息转换成json格式
本次下载是后台文件流传输,前端下载,前端将拿到的下载id和名称downloadName传递给下载方法:如果是多个下载,可以采用数组for循环 情景描述: 1.如果符合导出条件, 后端直接返回数据流,如 ...
- 【post请求下载文件流】如何使用post请求下载文件流 blob
最近有个需求,做文件的下载.其实下载没什么要特别说的,之前都是用的get请求,这次不同,后台用的post请求,返回的是数据流,这种post请求下载文件的方式倒是没怎么弄过.记录一下. 接口 接口地址为 ...
- vue 后台返回的文件流进行预览_vue实现下载文件流完整前后端代码
这篇文章主要为大家详细介绍了vue实现下载文件流完整前后端代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 使用Vue时,我们前端如何处理后端返回的文件流 首先后端返 ...
- js实现下载文件流图片
1.请求响应需要设置响应类型为流 responseType: 'blob', 2.下载文件流 // res 为后台返回的文件流 const reader = new FileReader();read ...
- js下载文件流,提示文件损坏问题
记录一下前端下载后端返回的文件流,提示文件损坏问题. const blob = new Blob([content.data], {// type是需要对应的文件类型type:"applic ...
- SpringBoot+Vue+Itext实现前端请求文件流的方式导出PDF时在指定位置添加照片
场景 SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF: SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF_BADAO_LIUMANG_QIZHI的 ...
- vue3下载文件流 下载excel
//点击下载按钮qaGetDebitVoucher:async (id:any)=>{let res=await $axios.get($api.qaGetDebitVoucher+id,{ r ...
- vue中将base64的pdf文件流转换成pdf并预览(一)——vue-pdf组件的基本使用
vue中将base64的pdf文件流转换成pdf并预览(一)--vue-pdf组件的基本使用 vue-pdf组件官网--https://www.npmjs.com/package/vue-pdf 1. ...
最新文章
- 青少年蓝桥杯_2020_steam考试_中级组_第二题
- 倾斜摄影技术在城市规划行业中扮演着什么样的角色?
- 德国巴伐利亚山谷积雪遍地 汽车被大雪掩埋
- Java实验方法参数传递与递归_4.3类的结构之二:方法(return,重载,可变个数形参,值传递,递归)...
- 了解计算机中的信息编码教案,五年级下册信息技术《奇妙的编码》教学设计
- python 库 类_在Python中导入库类
- 图:出场顺序号码随机抽取及公开展示,并行随机抽取多个题目号码及公开展示-软件原型设计
- 【2020牛客寒假基础算法训练营】第六场总结
- 进销存excel_Excel小技巧|手把手教你制作简易的进销存管理系统
- mac HBux连接夜神模拟器
- abandon connection, owner thread: DubboServerHandler错误原因
- Word文档人民币符号怎么打出来
- 斐讯c 语言面试题,斐讯面试记录—三线程交替打印ABC
- with revoked permission android.permission.CAMERA
- JAVA 抽象类与接口
- Coggle推荐系统学习任务1:推荐系统基础
- 谷粒商城三阶段课件_高二地理必修三11:(课件)第2章 区域生态环境建设第2节 森林的开发和保护——以亚马孙热带雨林为例...
- English--美式发音
- 云上数据保护,你以为挡住黑客就够了?
- (windows) Android ffmpeg 移植 cygwin+ndk-r8e+win7