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插件的基本知识
Nov 25 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
动态加载jquery库的方法
Feb 12 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 Javascript
微信小程序实现转盘抽奖
Sep 21 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/05/10 PHP
php缓冲输出实例分析
2015/01/05 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
理解JavaScript中的事件
2006/09/23 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
Python getopt模块处理命令行选项实例
2014/05/13 Python
python编程开发之日期操作实例分析
2015/11/13 Python
Python入门必须知道的11个知识点
2018/03/21 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
python3安装crypto出错及解决方法
2019/07/30 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
应届生程序员求职信
2013/11/05 职场文书
车间副主任岗位职责
2013/12/24 职场文书
简历的自我评价
2014/02/03 职场文书
求职信范文大全
2014/05/26 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS