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

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

  • 使用 HTML 标签

    • iframe 标签
    • embed 标签
    • object 标签

  • 使用第三方插件

    • PDF.js
    • PDFObject

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

  • 第一类方案：使用 HTML 标签的实现预览效果最为简单，但兼容性最差，仅支持部分 PC 端的浏览器，移动端浏览器兼容非常差。

  • 第二类方案：使用第三方库的功能强大，还可对 pdf 文件进行操作，PC 端兼容性比较好，但在移动端会有 pdf 文件显示不全的 bug 出现，而且在移动端浏览器兼容性一般。

  • 第三类方案：PDF 文件转化成图片进行展示的兼容性最好，能同时在 PC 端和移动端预览，但由于是图片格式，所以选中 pdf 文件上的文件，更加无法继续宁操作。
    因为我的个人博客尚未实现适配移动端，所以选择了第二类方案。

1.使用 HTML 标签

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

1.1 iframe 标签

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

  • iframe 标签的属性含义请参照 MDN
  • iframe 标签的兼容性请参照 Can I Use
    iframe 标签实现方案代码如下所示：
<iframe src="./test.pdf" height="900px;" width="800px"></iframe>

1.2 embed 标签

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

  • embed 标签的属性含义请参照 MDN
  • embed 标签的兼容性请参照 Can I Use

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

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

1.3 object 标签

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

  • object 标签的属性含义请参照 MDN
  • object 标签的兼容性请参照 Can I Use

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

<objectdata="./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 是基于Promise 对象而实现的，不了解的读者可以先去看看MDN 上的解释。
  • pdf.js 渲染 pdf 时底层还使用了Web Worker（这会导致我们无法直接在本地运行官网下载的 demo，得在服务器上运行，详情见注意点处），不了解的读者可以去看一下阮一峰老师关于 Web Worker 的文章。

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 名字信息
该方法的更多详细信息可参照博文
具体代码如下：

window.open("./web/viewer.html?file=test.pdf");//文件和 viewer.html 同路径时
2.1.3 使用 PDF.js 的注意事项

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

注意事项一：pdf.js 需要启动服务器才能运行，无法直接打开本地的文档

  • 原因：因为 pdf.js 渲染 pdf 文档时使用了 Web Worker 技术，该 Web Worker 无法读取本地文件。可参见阮一峰老师关于 Web Worker 的文章

  • 报错信息：Message: Missing PDF “file:///D:/%E6%A1%8C%E9%9D%A2/pdfjs/web/test.pdf”

  • 解决办法：可通过 live-server 这个插件在本地启动服务器然后打开相应的 html 文件。

  • 具体步骤：

    1. npm i live-server 安装包
    2. live-server 启动服务器 更多配置信息可参见此博客
    3. 打开相应的 html 文件
注意事项二：我们的电脑上不能安装 IDM（Internet Download Manager）这类软件或插件。
  • 报错信息 ： Unexpected server response (204) while retrieving PDF
  • 原因：因为 IDM 会拦截可下载的资源，会导致页面无法预览。
  • 解决办法：直接卸载或关闭相应的插件、软件；也可以对软件进行相应的设置。更多信息可参照博文

另外使用 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 来指定视觉样式，包括维度、边框、边距等
<div id="pdf"></div><script src="library/pdfobject.js"></script><script>PDFObject.embed("uploads/pdfs/dongxuemin.pdf", "#pdf");</script><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 文档的文本，所以我没使用该方法，就没进行进一步研究。大家可去参照其他博客。

参考博课：

  • 前端预览 PDF 文件（使用 PDFJS）
  • 实现在线预览 PDF 的几种解决方案
  • PDFObject.js、jquerymedia.js、pdf.js 的对比
  • PDF 预览之 PDFObject.js 总结

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

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