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