React中实现PDF链接首次点击下载、二次点击弹窗预览的方案咨询

整体逻辑不需要依赖S3 PDF链接的固定格式，完全适配你现有的下载功能基础，核心靠本地状态标记+二进制资源缓存实现点击行为的区分。 #

具体实现步骤 #

• 缓存层设计
  准备两个缓存容器：第一个用来存PDF的下载状态标记，第二个用来存首次下载拿到的PDF二进制资源。缓存key不用解析S3链接内容，直接用你业务侧的PDF唯一标识（比如接口返回的资源ID、或者对返回的链接做哈希生成唯一值）即可，全程不触碰链接格式规则，满足保密要求。
  轻量场景可以直接用Map+组件状态存，需要跨页面保留状态的话用sessionStorage，缓存大体积PDF的话选IndexedDB就行。
• 首次点击逻辑
  点击按钮后检测到当前PDF没有已下载标记时：
  1. 调用你的现有接口拿到S3 PDF链接
  2. 通过fetch请求拉取该链接的PDF二进制流，将响应转为Blob对象存入资源缓存
  3. 动态创建<a>标签，调用URL.createObjectURL(blob)生成临时本地地址赋值给标签href，配置download属性后触发点击，完成本地下载
  4. 下载触发后，将该PDF标记为已下载状态
• 二次及后续点击逻辑
  检测到当前PDF已有已下载标记、且资源缓存存在时，直接阻断原下载逻辑，唤起内嵌PDF的modal弹窗：
  1. modal内放置<iframe>或者<embed>标签，src直接复用之前缓存Blob生成的临时本地地址，不需要重新发起网络请求，加载速度极快
  2. 可以在modal角落加个兜底的「重新下载」按钮，复用首次点击的下载逻辑就行，兼容个别用户需要重新存本地的需求

注意事项 #

• 不要直接缓存S3链接做预览：如果你的S3链接是带时效的签名链接，缓存链接过期后会导致预览失败，缓存Blob资源不存在这个问题
• 页面卸载时记得调用URL.revokeObjectURL()释放生成的临时对象地址，避免不必要的内存占用
• 基础预览用原生iframe/embed就足够，不需要额外引入第三方PDF解析库，如果需要加批注、翻页控制这类自定义能力，再考虑引入对应工具即可

这套逻辑和你用什么前端框架无关，原生JS、React、Vue都能直接落地，不会破坏你现有的下载功能逻辑。

内容的提问来源于stack exchange，提问作者Thi Nguyen