Javascript前端下载后台传来的文件流代码实例


Posted in Javascript onAugust 18, 2020

前台请求数据:

url: '/app/downloadApp',
 method: 'get',
 responseType: 'blob',
 params: data

设置接收参数格式为responseType: ‘blob',

downloadFile(res, fileName) {
   if (!res) {
    return
   }
   if (window.navigator.msSaveBlob) { // IE以及IE内核的浏览器
    try {
     window.navigator.msSaveBlob(res, fileName) // res为接口返回数据,这里请求的时候已经处理了,如果没处理需要在此之前自行处理var data = new Blob([res.data]) 注意这里需要是数组形式的,fileName就是下载之后的文件名
     // window.navigator.msSaveOrOpenBlob(res, fileName); //此方法类似上面的方法,区别可自行百度
    } catch (e) {
     console.log(e)
    }
   } else {
    let url = window.URL.createObjectURL(new Blob([res]))
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', fileName)// 文件名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link) // 下载完成移除元素
    window.URL.revokeObjectURL(url) // 释放掉blob对象
   }
 },
 download(){
   var data = {
    appId:this.appId
   }
   downloadAppAjax(data).then(res => {
     const filename = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);
     console.log(filename)
     this.downloadFile(res.data,filename)
   })
  }

这里的downloadAppAjax调用后台接口,请求数据,获取后台返回的数据没有文件名,最后发现在header Content-Disposition属性里 attachment;filename=app.jpg

所以我们要实现下载自动重命名就需要拿出filename,这里我们使用decodeURI对Content-Disposition属性值进行解码,拿到filename:

decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);

拿到文件流和文件名后 接收文件流并创建地址

let url =window.URL.createObjectURL(new Blob([res]))

接着利用a标签进行下载即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
微信小程序登录session的使用
Mar 17 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 #Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 #Javascript
JavaScript中交换值的10种方法总结
Aug 18 #Javascript
js+css3实现炫酷时钟
Aug 18 #Javascript
纯js+css实现在线时钟
Aug 18 #Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 #Javascript
js+css实现扇形导航效果
Aug 18 #Javascript
You might like
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
在PHP中使用模板的方法
2008/05/24 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
PHP反射学习入门示例
2019/06/14 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
js获取变量
2006/08/24 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
配置eslint规范项目代码风格
2019/03/11 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
详谈python http长连接客户端
2017/06/12 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
python os模块简单应用示例
2019/05/23 Python
Python测试模块doctest使用解析
2019/08/10 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
python Paramiko使用示例
2020/09/21 Python
python中PyQuery库用法分享
2021/01/15 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
护士自我鉴定
2013/10/23 职场文书
校本教研工作方案
2014/01/14 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
护士年终个人总结
2015/02/13 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书