js实现只下载不查看pdf功能

一、业务场景：

后端返回pdf文件的服务器地址，前端实现浏览器下载pdf文件到本地的功能。

二、实现方式

一般情况下我们会用a标签通过赋值文件的服务器地址给href属性，再配合a标签和download属性是现在下载文件的功能，但是由于浏览器支持pdf的查看，所以即便加了download属性，浏览器依然会直接打开pdf，并不会下载。

上代码：

// url即文件的服务端地址
fetch(url).then(res => {
    res.blob().then(blob => {
      const blobUrl = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      const name = '文件名称'
      a.style.display = 'none'
      a.href = blobUrl
      a.download = name
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      window.URL.revokeObjectURL(blobUrl)
    })
  })

三、跨域问题

如果出现跨域错误，url中服务器地址改成本地环境proxy跨域的key就行。

举例：

文件服务器地址：

const url = 'http://60.34.453.23:8090/file/xxxx.pdf'

本地环境proxy配置：

proxy: {  
      '/server': {
        target: 'http://60.34.453.23:8090',
        changeOrigin: true,
        rewrite: (path) => path.replace('/server', '')
      }
}

那么，url改成 

const proxyNameSpace = process.env.NODE_ENV === 'production' ? '' : '/server' // proxy解决跨域
const url = proxyNameSpace + '/file/xxxx.pdf'

即可。