前台请求数据:
url: '/app/downloadApp',
method: 'get',
responseType: 'blob',
params: data
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)

})

}
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]);
decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]);拿到文件流和文件名后 接收文件流并创建地址let url =window.URL.createObjectURL(new Blob([res]))
let url =window.URL.createObjectURL(new Blob([res]))接着利用a标签进行下载即可。以上就是本文的全部内容,希望对大家的学习有所帮助。