一、业务场景:
后端返回pdf文件的服务器地址,前端实现浏览器下载pdf文件到本地的功能。
二、实现方式
一般情况下我们会用a标签通过赋值文件的服务器地址给href属性,再配合a标签和download属性是现在下载文件的功能,但是由于浏览器支持pdf的查看,所以即便加了download属性,浏览器依然会直接打开pdf,并不会下载。
上代码:
// url即文件的服务端地址
fetch(url).then(res => {
res.blob().then(blob => {
const blobUrl = window.URL.createObjectURL(blob)
const a = document.createElement('a')
const name = '文件名称'
a.style.display = 'none'
a.href = blobUrl
a.download = name
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
window.URL.revokeObjectURL(blobUrl)
})
})
三、跨域问题
如果出现跨域错误,url中服务器地址改成本地环境proxy跨域的key就行。
举例:
文件服务器地址:
const url = 'http://60.34.453.23:8090/file/xxxx.pdf'
本地环境proxy配置:
proxy: {
'/server': {
target: 'http://60.34.453.23:8090',
changeOrigin: true,
rewrite: (path) => path.replace('/server', '')
}
}
那么,url改成
const proxyNameSpace = process.env.NODE_ENV === 'production' ? '' : '/server' // proxy解决跨域
const url = proxyNameSpace + '/file/xxxx.pdf'
即可。