一、问题描述:
只有pdf下载唯有谷歌无法弹出直接下载,在搜狗浏览器或者360浏览器之类的就可以直接下载了。因为是Chrome浏览器,所以才会打开PDF文件,该功能是可以在设置中关闭的,Chrome浏览器默认可以打开图片和PDF文件,其它文件使用上述方式是可以下载的。
二、场景需求
2.1 接口需求
- 导出pdf,需要接口为流文件
- 在线预览pdf,需要接口为url,在谷歌浏览器可直接预览,但在其他浏览器需要使用PDFJS插件
- 导出xls,需要接口为url
- 在线预览xls,需要接口为流文件
2.2 后台开发
有的A同事说 接口得提供流文件,没时间做存放ftp服务器。B同事习惯做存放ftp服务器。如果pdf下载,何况必须做流文件,否则谷歌浏览器无法直接弹出下载框。
三、参考:
四、XLS与PDF导出代码示例
onDownload (obj) {
this.downloadDisabled = true // 下载按钮是否控制禁用
if (obj.suffix === '.pdf') { // 是pdf格式
this.axios.post('文件下载请求接口', this.$qs.stringify({
filename: obj.fileName + obj.suffix // 参数请求
}), {
responseType: 'blob' // 平时 用json常遇到后端返回的数据格式。不同的是blob,当后端返回一个文件流时候会用到。
})
.then((res) => {
console.log(res)
let name = obj.fileName + '.pdf'
let blob = res
console.log(blob)
this.downloadDisabled = false
if (window.navigator.msSaveOrOpenBlob) { // 当前浏览器是否支持默认弹出"保存"对话框
navigator.msSaveBlob(blob, name)
} else { // 当前浏览器不支持直接弹出下载,执行以下
let a = document.createElement('a')
a.style.display = 'none'
a.download = name
a.href = URL.createObjectURL(blob)
document.body.appendChild(a) // 修复firefox中无法触发click
a.click()
document.body.removeChild(a)
this.downloadDisabled = false // 关闭禁用
}
})
.catch((error) => {
console.log(error)
this.downloadDisabled = false // 关闭禁用
})
} else { // 非pdf格式
let a = document.createElement('a')
a.style.display = 'none'
a.download = obj.originalName
a.href = obj.url
a.target = '_blank'
document.body.appendChild(a) // 修复firefox中无法触发click
a.click()
document.body.removeChild(a)
this.downloadDisabled = false // 关闭禁用
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。