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 相关文章推荐
javascript 45种缓动效果 非常酷
Jun 28 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
JavaScript实现筛选数组
Mar 02 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
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/04 新手入门
PHP生成Gif图片验证码
2013/10/27 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
js验证密码强度解析
2020/03/18 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
Python计算程序运行时间的方法
2014/12/13 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
详解python中eval函数的作用
2019/10/22 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
python的dict判断key是否存在的方法
2020/12/09 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
2015重阳节敬老活动总结
2015/07/29 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
MySQL索引是啥?不懂就问
2021/07/21 MySQL