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

 更新时间:2020年08月18日 15:58:37   作者:niniHan  
这篇文章主要介绍了Javascript前端下载后台传来的文件流代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

前台请求数据:

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标签进行下载即可。

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

相关文章

  • 使用requestAnimationFrame实现js动画性能好

    使用requestAnimationFrame实现js动画性能好

    requestAnimationFrame优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销,这篇文章给大家详细介绍使用requestAnimationFrame实现js动画
    2015-08-08
  • 常用的JavaScript WEB操作方法分享

    常用的JavaScript WEB操作方法分享

    这篇文章主要介绍了常用的JavaScript WEB操作方法分享,包含数组方法集、cookie方法集、url方法集、正则表达式方法集、字符串方法集、加密方法集、日期方法集等常用操作方法,需要的朋友可以参考下
    2015-02-02
  • JS常用跨域方法实现原理解析

    JS常用跨域方法实现原理解析

    这篇文章主要介绍了JS常用跨域方法实现原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • 微信小程序 wxParse插件显示视频问题

    微信小程序 wxParse插件显示视频问题

    这篇文章主要介绍了微信小程序 wxParse插件显示视频问题,文中给大家提到了微信小程序插件wxParse的使用,需要的朋友可以参考下
    2019-09-09
  • 利用Math.js解决JS计算小数精度丢失问题

    利用Math.js解决JS计算小数精度丢失问题

    电商系统中订单、库存中有数字等加减乘除算术,下面这篇文章主要给大家介绍了关于利用Math.js解决JS计算小数精度丢失问题的相关资料,mathjs是一个前端在计算上面必定会用到的类库,需要的朋友可以参考下
    2022-04-04
  • JS 根据子网掩码,网关计算出所有IP地址范围示例

    JS 根据子网掩码,网关计算出所有IP地址范围示例

    这篇文章主要介绍了JS 根据子网掩码,网关计算出所有IP地址范围,涉及IP地址、子网的正则验证,子网掩码计算等相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • 原生js开发的日历插件

    原生js开发的日历插件

    本文主要分享了原生js开发的日历插件的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js实现input密码框显示/隐藏功能

    js实现input密码框显示/隐藏功能

    这篇文章主要为大家详细介绍了js实现input密码框显示和隐藏功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 小程序录音功能实现

    小程序录音功能实现

    这篇文章主要介绍了小程序录音功能实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 记录一篇关于redux-saga的基本使用过程

    记录一篇关于redux-saga的基本使用过程

    这篇文章主要介绍了记录一篇redux-saga的基本使用过程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论