在 HTML 中插入 PDF

如果你需要在 HTML 页面中嵌入 PDF 文件，那么你可以使用以下几种方法：

1. 使用 <embed> 标签

你可以使用 <embed> 标签来将 PDF 文件嵌入到 HTML 页面中。这种方法的优点是它很简单，而且不需要使用任何 JavaScript 代码。下面是一个例子：

<embed src="your-pdf-file.pdf" width="600px" height="500px" />

在这个例子中，你需要将 your-pdf-file.pdf 替换成你自己的 PDF 文件名。你也可以根据你的需求调整 PDF 文件的宽度和高度。

2. 使用 <object> 标签

另一种嵌入 PDF 文件的方法是使用 <object> 标签。这种方法可以在一些老旧的浏览器上兼容性更好。以下是一个例子：

<object data="your-pdf-file.pdf" type="application/pdf" width="600px" height="500px">
  <p>你的浏览器不支持 PDF 文件嵌入，请点击<a href="your-pdf-file.pdf">这里</a>下载该文件。</p>
</object>

和上面的例子相比，这个例子使用了一个 <p> 元素来提供 fallback 实现，如果浏览器不支持嵌入 PDF 文件，那么该元素将会显示一个链接，用户可以点击该链接来下载 PDF 文件。

3. 使用 PDF.js 库

PDF.js 是一个由 Mozilla 开发的 JavaScript 库，它可以将 PDF 文件渲染到 HTML5 Canvas 上。如果你想要更好的控制 PDF 文件的呈现方式，那么你可以考虑使用这个库。使用 PDF.js 的方法如下：

首先你需要在 HTML 页面中引入 PDF.js 的脚本和样式文件：

<link rel="stylesheet" href="path/to/pdfjs/web/viewer.css">
<script src="path/to/pdfjs/build/pdf.js"></script>

然后你需要在 HTML 页面中添加一个 <canvas> 元素，用于显示 PDF 文件的内容：

<canvas id="pdf-canvas"></canvas>

最后你需要编写一些 JavaScript 代码，来加载和渲染 PDF 文件：

var url = 'your-pdf-file.pdf';

PDFJS.getDocument(url).then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var canvas = document.getElementById('pdf-canvas');
    var context = canvas.getContext('2d');
    var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);

    canvas.height = viewport.height;

    page.render({
      canvasContext: context,
      viewport: viewport
    });
  });
});

这段代码首先使用 PDFJS.getDocument(url) 方法来加载 PDF 文件，然后通过 pdf.getPage(1) 方法来获取第一页的内容。接下来，它创建一个 Canvas 上下文对象，并根据需要调整 PDF 页的视窗，以使其适应 Canvas。最后，它使用 page.render() 方法将 PDF 页渲染到 Canvas 上。你可以根据需要使用 pdf.numPages 属性来获取 PDF 文件的总页数，然后使用循环来渲染所有的页。

以上就是三种在 HTML 页面中嵌入 PDF 文件的方法。你可以根据你的需求来选择其中的一种或多种实现。