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

发布时间：2023-04-21 文章分类：WEB开发, 电脑百科 投稿人：王小丽 字号： 默认 | 大 | 超大 打印

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

由于在搭建个人博客时，想实现在线预览 pdf 格式的个人简历，经过查阅大致有三大类实现方案；本文共涉及以下 5 种实现方案，如下所示：

1.使用 HTML 标签

该类方法实现简单，但兼容性很差，慎重选择。

1.1 iframe 标签

HTML 内联框架元素 iframe 表示嵌套的 browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。

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

1.2 embed 标签

HTML embed 元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。

embed 标签实现方案代码如下所示：

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

1.3 object 标签

HTML object 元素（或者称作 HTML 嵌入对象元素）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。

object 标签实现方案代码如下所示：

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

2.使用第三方插件

能实现实时预览 pdf 的插件还有许多种，但使用最多的是 PDF.js 与 PDFObject，所以本文只涉及这两个插件。

2.1 PDF.js

2.1.1 PDF.js 简介

PDF.js 是一款开源的 pdf 文档读取解析插件，可以实现在 html 下直接浏览 pdf 文档。

PDF.js 主要分为 3 层：
显示层采用核心层，并公开更容易使用的 API 来呈现 pdf 和从文档中获取其他信息。

层级 对应文件 作用
Core Layer（核心层） pdf.worker.js 核心层用于解析和解释二进制 PDF 文档，这一层是所有后续层的基础。一般我不会直接操作核心层，而是去操作由核心层封装的展示层，操作核心层的高级用法可去参照官网
Display Layer（展示层） pdf.js 显示层是对核心层进行了一个封装，从而得到更容易使用的 API，用来展示 pdf 或从文档中获取其他信息。
Viewer Layer（查看器层） viewer.html+viewer.css+viewer.js 查看器构建在显示层上，是 PDF 查看器的 UI。

更多的细节请参照官网

2.1.2 使用 PDF.js 具体步骤

方法一

该方法是以图片形式来展示 PDF 文档，所以不能选中文本或复制文本。

具体步骤如下：

  1. 首先 npm i pdfjs-dist 下载 pdf.js 的 Prebuilt 包
  2. 设置 PDFJS.GlobalWorkerOptions.workerSrc 的地址
  3. 通过 PDFJS.getDocument（pdf 文件的 url） 处理 pdf 数据，返回一个 PDFDocumentLoadingTask
  4. 通过 pdfDoc.getPage（i） 单独获取第 i 页的数据
  5. 创建一个 canvas 元素，并设置元素的画布属性
  6. 通过 page.render 方法，将数据渲染到画布上、

具体代码如下：

// 第 2 步：设置 workerSrc 地址 （具体包的地址需要依自身项目决定）
import * as PDFJS from "./build/pdf.js";
import pdfjsWorker from "./build/pdf.worker.js";
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;
const pdfUrl = "./test.pdf"; //具体路径由自身项目决定，另外这可能会涉及跨域问题可参照官网解决
console.log(pdfUrl);
// 第 3 步：使用 PDFJS.getDocument（） 处理 pdf 文档
PDFJS.getDocument(pdfUrl).promise.then((pdfDoc) => {
  const totalPages = pdfDoc.numPages; // pdf 的总页数
  const canvasContainer = document.getElementById("#canvasContainer"); //html中需创建一个相应的div容器，用于存放canvas元素
  for (let i = 1; i <= totalPages; i++) {
    // 第4步：使用 pdfDoc.getPage（i） 获取第 i 页的数据
    pdfDoc.getPage(i).then((page) => {
      let scaledViewport = page.getViewport({ scale: 1.5 }); //可通过scale来调节初始的缩放比
      //第5步：创建一个 canvas 元素，并设置元素的画布属性
      let canvas = document.createElement("canvas");
      canvas.setAttribute("id", "the-canvas" + i);
      canvas.height = scaledViewport.height;
      canvas.width = scaledViewport.width;
      let context = canvas.getContext("2d");
      let renderContext = {
        canvasContext: context,
        viewport: scaledViewport,
      };
      //第 6 步: 使用 page.render 将数据渲染到画布上
      page.render(renderContext).promise.then(() => {});
      canvasContainer.appendChildren(canvas); //将canvas元素加入到容器中
    });
  }
});
方法二

直接使用官方封装好的 viewer.html 来展示自己的 PDF 文档，该方法比较简单，不用去操作 API；而且功能比较齐全，还可复制 pdf 中的文本。

具体步骤如下： 1.去官网下载打包好的 Prebuilt 版本压缩包 2.将需要打开的 PDF 文档放到与 viewer.html 文档的同一目录下 3.新建一个 html 文件，使用 window.open 方法 或 iframe 标签 来打开 viewer.html，并使用 file 字段来传入 pdf 名字信息
该方法的更多详细信息可参照博文
具体代码如下：

<!-- 使用iframe -->
<!-- 该方法会受iframe标签兼容性限制 -->
<iframe
  src="./web/viewer.html?file=test.pdf"
  frameborder="0"
  style="height: 800px; width: 100%"
></iframe>
<!-- 使用window.open-->
<!-- 该方法会打开新窗口 -->
<script type="text/javascript">
    window.open("./web/viewer.html?file=test.pdf");//文件和 viewer.html 同路径时
</script>

2.1.3 使用 PDF.js 的注意事项

这里的内容非常重要，可以避免踩坑。我就是在这浪费了足足两天的时间，最终才找到解决办法。

注意事项一：pdf.js 需要启动服务器才能运行，无法直接打开本地的文档
注意事项二：我们的电脑上不能安装 IDM（Internet Download Manager）这类软件或插件。

另外使用 pdf.js 打开发票等文件时可能会出现字体显示不全的 bug，可参照该博客解决 pdf.js 无法完全显示 pdf 文件内容的问题。

2.2 PDFObject

相对 pdf.js 来说，PDFObject 的使用非常简单。但在手机 webview 使用兼容性不太好。
PDFObject 2.0 不向后兼容 1.0 版本，针对现代浏览器设计，支持 Chrome, Firefox, Safari (OS X and iOS), IE 9-11, and MS Edge。
更多信息可参照官网地址，和该篇博客PDF 预览之 PDFObject.js 总结
使用步骤:

  1. 创建嵌入 PDF 的容器
  2. 告诉 PDFObject，插入的 PDF 文件路径，以及插入到哪个容器
  3. 可以选择使用 CSS 来指定视觉样式，包括维度、边框、边距等
<!-- 第1步：创建嵌入PDF的容器 -->
<div id="pdf"></div>
<!-- 第2步：告诉PDFObject，插入的PDF文件路径，以及插入到哪个容器 -->
<script src="library/pdfobject.js"></script>
<script>
  PDFObject.embed("uploads/pdfs/dongxuemin.pdf", "#pdf");
</script>
<!-- 第3步：可以选择使用CSS来指定视觉样式，包括维度、边框、边距等 -->
<style>
  .pdfobject-container {
    height: 500px;
  }
  .pdfobject {
    border: 1px solid #ccc;
  }
</style>

另外还有许多第三方库可实现 pdf 预览，如：vue-pdf、jquery.media.js等等。

3.PDF 文件转化成图片进行展示

把 PDF 转换为图片也有很多控件处理，例如 Aspose.Pdf、Spire.Pdf、 pdfiumviewer 等等，不同的第三方类库使用的方法有所差异，不过思路都很类似。
由于转成图片将无法复制或选中 PDF 文档的文本，所以我没使用该方法，就没进行进一步研究。大家可去参照其他博客。

参考博课：

码字不易，觉得有帮助的朋友点赞，关注走一波。

如果对本文存在疑惑，可在评论区讨论，欢迎大家指正文中的错误观点。

标签 , ,