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

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