如何在React.js中实现点击PDF URL直接下载而不打开预览？

问题原因 #

• 你加了target="_blank"属性，点击后会自动打开新标签页，必然触发PDF预览
• 原生download属性仅对同源资源生效，跨域的PDF资源加了这个属性也没用，浏览器默认还是会打开预览
• 你用的react-router的Link组件是做路由跳转用的，不适合用来处理文件下载逻辑

解决方案 #

方案1（最稳定，推荐）：修改服务端响应头

如果PDF资源归你方服务端管控，直接在返回PDF的响应头中添加以下字段即可：

Content-Disposition: attachment; filename="自定义文件名.pdf"

浏览器识别到这个响应头后，无论同源还是跨域都会直接触发下载，不会走预览逻辑。

方案2：前端用Blob中转下载（跨域资源可用）

如果没法修改服务端配置，可以用fetch把PDF转成Blob对象再触发下载，实现代码如下：

1. 封装下载逻辑函数

const downloadPdf = async (pdfUrl, fileName = '文档.pdf') => {
  try {
    // 注意：跨域资源需要服务端开启CORS允许你的域名访问，否则fetch会报错
    const res = await fetch(pdfUrl)
    const blob = await res.blob()
    const blobUrl = window.URL.createObjectURL(blob)
    const aTag = document.createElement('a')
    aTag.href = blobUrl
    aTag.download = fileName
    document.body.appendChild(aTag)
    aTag.click()
    // 内存清理
    aTag.remove()
    window.URL.revokeObjectURL(blobUrl)
  } catch (e) {
    console.error('PDF下载失败，请稍后重试', e)
  }
}

2. 替换原来的Link组件，用按钮触发下载即可

<button onClick={() => downloadPdf('http://www.africau.edu/images/default/sample.pdf', 'sample.pdf')}>
  下载PDF
</button>

内容的提问来源于stack exchange，提问作者Hema Ramasamy