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游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
javascript闭包入门示例
Apr 30 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 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的几个常用数字判断函数代码
2012/04/24 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
Laravel 5.3 学习笔记之 错误&日志
2016/08/28 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
python zip文件 压缩
2008/12/24 Python
Python程序设计入门(1)基本语法简介
2014/06/13 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
网上开商店的创业计划书
2014/01/19 职场文书
环境工程专业自荐信
2014/03/03 职场文书
承诺书怎么写
2014/03/26 职场文书
家长建议怎么写
2014/05/15 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
离职感谢信怎么写
2015/01/22 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
纪律委员竞选稿
2015/11/19 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
vue的项目如何打包上线
2022/04/13 Vue.js