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 // 敞开禁用    
  }
}