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

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