在 HTML 中显示 PDF

最近，越来越多的网站需要在页面中嵌入 PDF 文件，以提供更好的用户体验和更方便的访问方式。本文将介绍三种常用的方式：使用 iframe 标签、使用 object 标签以及使用 JavaScript 插件。

1. 使用 iframe 标签

iframe 标签通常用于在网站页面中嵌入其他网站或网页。但是，iframe 标签也可以用于嵌入 PDF 文件。以如下代码为例：

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

其中，src 属性指定了 PDF 文件的路径，width 属性和 height 属性指定了 iframe 标签的宽度和高度。需要注意的是，由于不同浏览器对 PDF 的支持程度不同，建议在 src 属性中使用完整的 URL 地址，以免出现兼容性问题。

2. 使用 object 标签

object 标签是 HTML 中用于嵌入多媒体内容（如音频、视频）的标签。同样，object 标签也可以用于嵌入 PDF 文件。以如下代码为例：

<object data="path/to/pdf/file.pdf" type="application/pdf" width="100%" height="500px"></object>

其中，data 属性指定了 PDF 文件的路径，type 属性指定了嵌入的文件类型，width 属性和 height 属性指定了 object 标签的宽度和高度。与 iframe 标签类似，由于不同浏览器对 PDF 的支持程度不同，建议在 data 属性中使用完整的 URL 地址，以免出现兼容性问题。

3. 使用 JavaScript 插件

除了使用 iframe 标签和 object 标签嵌入 PDF 文件之外，还可以使用 JavaScript 插件来实现更灵活的功能。常见的 JavaScript 插件有 Mozilla 的 pdf.js 和 Google 的 pdf.js。以 pdf.js 为例，可以通过以下代码实现在页面中显示 PDF 文件：

<div id="pdf-container"></div>

<script src="path/to/pdf.js"></script>
<script>
  var url = 'path/to/pdf/file.pdf';

  pdfjsLib.getDocument(url).promise.then(function(pdf) {
    pdf.getPage(1).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport({ scale: scale });

      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      var renderContext = {
        canvasContext: context,
        viewport: viewport
      };

      page.render(renderContext);
      document.getElementById('pdf-container').appendChild(canvas);
    });
  });
</script>

其中，pdfjsLib.getDocument 方法用于获取 PDF 文件对象，.getPage 方法用于获取指定页码的页面对象，.getViewport 方法用于获取页面对应的视口对象，canvas 标签用于渲染页面内容。父元素 div 用于包含渲染后的 canvas 标签。

需要注意的是，使用 JavaScript 插件不仅可以在页面中嵌入 PDF 文件，还可以对 PDF 文件进行更丰富的操作，如搜索、高亮、划重点等功能。

结语

以上是在 HTML 中显示 PDF 的三种常用方式：使用 iframe 标签、使用 object 标签以及使用 JavaScript 插件。根据实际需求选择不同的方式即可。