如何在React中为应用内存储的PDF创建‘打开/另存为’弹窗链接？

核心要点 #

• Content-Disposition 是服务端专属的响应头属性，前端无法通过JSX/HTML属性直接配置，这个属性的控制权在服务端，前端只能通过浏览器默认行为或服务端配合实现需求。
• 最简实现无需复杂逻辑，只需调整资源引用方式和标签类型即可。

具体实现步骤 #

1. 调整文件存放路径
   将 src/documents/example.pdf 移动到项目根目录的 public/documents/ 文件夹下（无此目录则新建）。public 目录下的文件会被作为静态资源直接部署，不需要经过webpack编译处理，能保证浏览器正确识别资源类型。

2. 替换为原生 <a> 标签
   不要使用 React Router 的 <Link> 组件（它是用于客户端路由跳转的，不适合处理静态资源），改用原生 HTML 的 <a> 标签，且不添加 download 或 target="_blank" 属性：

   <a href="/documents/example.pdf">
     Example file
   </a>
   

原理说明 #

当浏览器识别到 <a> 标签指向可预览的PDF资源，且未被强制设置下载或新窗口打开时，会触发自身默认的“打开/保存”选择弹窗（前提是用户浏览器没有配置强制自动打开或下载该类型文件）。

特殊场景补充 #

如果必须将PDF保留在 src 目录中（比如需要webpack的资源处理能力），可以通过 require 引入生成资源URL，同样使用原生 <a> 标签且不添加特殊属性：

const pdfUrl = require('./documents/example.pdf');

<a href={pdfUrl}>
  Example file
</a>

内容的提问来源于stack exchange，提问作者P H