一、问题描述:

只有pdf下载唯有谷歌无法弹出直接下载,在搜狗浏览器或者360浏览器之类的就可以直接下载了。因为是Chrome浏览器,所以才会打开PDF文件,该功能是可以在设置中关闭的,Chrome浏览器默认可以打开图片和PDF文件,其它文件使用上述方式是可以下载的。

二、场景需求

2.1 接口需求

  1. 导出pdf,需要接口为流文件
  2. 在线预览pdf,需要接口为url,在谷歌浏览器可直接预览,但在其他浏览器需要使用PDFJS插件
  3. 导出xls,需要接口为url
  4. 在线预览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 // 关闭禁用    
  }
}

LazyYou2016
6 声望0 粉丝