使用 PDF.js 在网页中嵌入 PDF

在网页中嵌入 PDF 的做法有很多，可以直接嵌入，也可以先转换为其他格式（如图片、HTML 等）再嵌入。通常，直接嵌入依赖于浏览器的原生实现，嵌入代码如下所示。

<iframe src="/path/to/example.pdf" width="100%" height="800px"></iframe>

但不同操作系统、不同浏览器的原生实现不同，用户难以获得跨平台的统一体验。更糟糕的是，手机端（如 Android）的主流浏览器（Firefox 和 Chrome）均不支持直接预览 PDF，以上代码的实现效果要么是弹出下载提示框，要么是根本不显示 PDF。因此，有必要使用专门的 PDF 预览脚本嵌入网页，以替代浏览器的（或许根本没有的）原生实现。

PDF.js 是由 Mozilla 开发的专用于在网页上渲染 PDF 的脚本。使用方法非常简单，下载预编译版本到网站服务器上，假设 PDF.js 所在文件夹相对网站根目录的路径为 /path/to/pdfjs，那么将之前的嵌入代码稍作改动即可（如下）。

<iframe
  src="/path/to/pdfjs/web/viewer.html?file=/path/to/example.pdf"
  width="100%"
  height="800px"
></iframe>

以下是一个样例，首先给出嵌入代码（如下）。

<iframe
  src="/pdfjs/web/viewer.html?file=/files/Geoff_Huston_Presentation.pdf"
  width="100%"
  height="800px"
></iframe>

效果如下。