Vue PDF与XSL文件下载

一、问题描述：

只有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下载，何况必须做流文件，否则谷歌浏览器无法直接弹出下载框。

三、参考：

• 1.vue项目调用接口下载文件--解决方案
• 2.下载文件原因描述

四、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 // 关闭禁用    
  }
}