在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对象)相关推荐

  1. 前端接收并下载文件流 (blob对象)(word/.doc)

    1 根据文件路径下载文件模板,前端拿到的是stream 文件流 2 将文件流下载下来 第一步 当然是写请求方法了,如下 //下载模板 export function download (params) ...

  2. vue-axios下载文件流blob,ie下载报传递给系统调用的数据区域太小.ie文件流下载报错;文件下载失败将blob的错误信息转换成json格式

    本次下载是后台文件流传输,前端下载,前端将拿到的下载id和名称downloadName传递给下载方法:如果是多个下载,可以采用数组for循环 情景描述: 1.如果符合导出条件, 后端直接返回数据流,如 ...

  3. 【post请求下载文件流】如何使用post请求下载文件流 blob

    最近有个需求,做文件的下载.其实下载没什么要特别说的,之前都是用的get请求,这次不同,后台用的post请求,返回的是数据流,这种post请求下载文件的方式倒是没怎么弄过.记录一下. 接口 接口地址为 ...

  4. vue 后台返回的文件流进行预览_vue实现下载文件流完整前后端代码

    这篇文章主要为大家详细介绍了vue实现下载文件流完整前后端代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 使用Vue时,我们前端如何处理后端返回的文件流 首先后端返 ...

  5. js实现下载文件流图片

    1.请求响应需要设置响应类型为流 responseType: 'blob', 2.下载文件流 // res 为后台返回的文件流 const reader = new FileReader();read ...

  6. js下载文件流,提示文件损坏问题

    记录一下前端下载后端返回的文件流,提示文件损坏问题. const blob = new Blob([content.data], {// type是需要对应的文件类型type:"applic ...

  7. SpringBoot+Vue+Itext实现前端请求文件流的方式导出PDF时在指定位置添加照片

    场景 SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF: SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF_BADAO_LIUMANG_QIZHI的 ...

  8. vue3下载文件流 下载excel

    //点击下载按钮qaGetDebitVoucher:async (id:any)=>{let res=await $axios.get($api.qaGetDebitVoucher+id,{ r ...

  9. vue中将base64的pdf文件流转换成pdf并预览(一)——vue-pdf组件的基本使用

    vue中将base64的pdf文件流转换成pdf并预览(一)--vue-pdf组件的基本使用 vue-pdf组件官网--https://www.npmjs.com/package/vue-pdf 1. ...

最新文章

  1. 青少年蓝桥杯_2020_steam考试_中级组_第二题
  2. 倾斜摄影技术在城市规划行业中扮演着什么样的角色?
  3. 德国巴伐利亚山谷积雪遍地 汽车被大雪掩埋
  4. Java实验方法参数传递与递归_4.3类的结构之二:方法(return,重载,可变个数形参,值传递,递归)...
  5. 了解计算机中的信息编码教案,五年级下册信息技术《奇妙的编码》教学设计
  6. python 库 类_在Python中导入库类
  7. 图:出场顺序号码随机抽取及公开展示,并行随机抽取多个题目号码及公开展示-软件原型设计
  8. 【2020牛客寒假基础算法训练营】第六场总结
  9. 进销存excel_Excel小技巧|手把手教你制作简易的进销存管理系统
  10. mac HBux连接夜神模拟器
  11. abandon connection, owner thread: DubboServerHandler错误原因
  12. Word文档人民币符号怎么打出来
  13. 斐讯c 语言面试题,斐讯面试记录—三线程交替打印ABC
  14. with revoked permission android.permission.CAMERA
  15. JAVA 抽象类与接口
  16. Coggle推荐系统学习任务1:推荐系统基础
  17. 谷粒商城三阶段课件_高二地理必修三11:(课件)第2章 区域生态环境建设第2节 森林的开发和保护——以亚马孙热带雨林为例...
  18. English--美式发音
  19. 云上数据保护,你以为挡住黑客就够了?
  20. (windows) Android ffmpeg 移植 cygwin+ndk-r8e+win7

热门文章

  1. 15.2. NFS Client Configuration
  2. 很好的Markdown开源库
  3. mysql双主使用reset master清除日志要小心
  4. Windows 10或成为最后一个Windows版本
  5. opencv源码解析之(6):hog源码分析
  6. linux之history命令
  7. 解决putty中文乱码并远程访问linux界面功能
  8. 论坛答疑SQL(二)
  9. 《Programming Ruby 中文版第二版》P577页singleton_method_undefined方法说明有点问题
  10. 云服务干掉的是运维。