如何实现PDF链接在线预览而不触发文件下载

你拿到的带签名的S3 PDF链接可以直接复用，不需要额外做资源转存，以下是几种可直接落地的实现方式：

• 新标签页原生预览（零成本实现）
  现代主流浏览器（Chrome、Edge、Firefox、Safari）都内置了PDF渲染引擎，你只需要给原有a标签加target="_blank"属性，用户点击后就会在新标签页直接打开PDF预览，不会触发下载，代码示例：

  <a href={pdfUrl} target="_blank" rel="noopener noreferrer">在线查看PDF</a>
  

  踩坑提示：如果点击后还是触发下载，先去S3控制台检查对应PDF文件的元数据，把响应头里的Content-Disposition值从attachment改成inline即可，这个配置是告诉浏览器直接展示资源，而不是下载。

• 当前页面内嵌预览（无需跳转）
  如果不想让用户离开当前页面，可以用原生iframe标签把PDF嵌入到页面的指定容器内，不需要引入任何第三方依赖，代码示例：

  <iframe
    src={pdfUrl}
    width="100%"
    height="850px"
    frameborder="0"
    title="PDF内容预览"
  ></iframe>
  

  你可以根据自己的页面布局调整iframe的宽高，外层还可以自定义包裹操作栏，实现关闭预览、调整尺寸这类交互。

• 自定义能力预览（兼容老旧环境/定制交互）
  如果需要兼容不支持原生PDF预览的老旧浏览器，或者要实现自定义页码跳转、水印、批注这类原生预览不支持的功能，可以引入开源的前端PDF渲染库，直接把现有PDF链接传入渲染实例，库会自动拉取PDF内容、解析后渲染到页面的canvas节点上，整个预览逻辑完全可控，不需要依赖浏览器自带的预览能力。

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