前端实现 PDF 预览的常见方案

在前端实现 PDF 预览的方式，通常会使用一些 JavaScript 库，例如 PDF.js 或 PDF-LIB。以下是使用 PDF.js 进行 PDF 预览的基本步骤：

首先需要安装PDF.js。如果你正在使用npm，可以通过npm安装：

npm install pdfjs-dist

然后，你可以在HTML文件中引入PDF.js和相应的版本文件：

<script src="node_modules/pdf.js/build/pdf.js"></script>
<script src="node_modules/pdf.js/build/pdf.worker.min.js"></script>

在 JavaScript 代码中，你可以使用以下方法加载并预览 PDF 文件：

// 创建一个PDF加载器对象
var loadingTask = pdfjsLib.getDocument('path_to_your_pdf_file');
loadingTask.promise.then(function(pdf) {
  // PDF加载成功，你可以在此处进行后续操作
  // 例如，显示第一页：
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport({ scale: scale });
    // 在此处设置PDF视图的宽度和高度
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    // 使用canvas绘制PDF页面
    var renderTask = page.render(renderContext);
    renderTask.promise.then(function () {
      console.log('Page rendered');
    });
  });
}, function (reason) {
  // PDF加载失败，reason为失败原因
  console.error(reason);
});

在这个例子中，你需要将 'path_to_your_pdf_file' 替换为你的 PDF 文件的实际路径，还需要设置合适的 canvas 元素的宽度和高度以适应你的页面布局。

以上就是使用 PDF.js 在前端预览 PDF 文件的基本步骤。注意，这只是一个基础版本的实现，你可能还需要处理更复杂的情况，例如多页 PDF、交互功能等等。

如果不使用第三方库，可以通过浏览器内置的 PDF 预览功能实现 PDF 文件预览。

现代浏览器通常都支持内置的 PDF 预览功能。只需在网页中嵌入 <embed> 或 <object> 标签，并将 PDF 文件的链接或路径指定为其 src 属性即可。这样，浏览器会自动加载和显示 PDF 文件。

<iframe src="./test.pdf" height="900px;" width="800px"></iframe>


<embed src="./test.pdf" type="application/pdf" width="100%" height="100%" />


<object data="./test.pdf" type="application/pdf" width="100%" height="100%"></object>

使用 HTML 标签的实现预览效果最为简单，但兼容性最差，仅支持部分 PC 端的浏览器，移动端浏览器兼容非常差。使用第三方库的功能强大，还可对 pdf 文件进行操作，PC 端兼容性比较好。