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 相关文章推荐
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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
PHP安全配置
2006/12/06 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
判断iframe里的页面是否加载完成
2014/06/06 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
Python中的is和id用法分析
2015/01/26 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
2015年银行客户经理工作总结
2015/04/01 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
Django基础CBV装饰器和中间件
2022/03/22 Python