前言

在项目开发的过程中，遇到了如下需求：需要对接口返回的pdf图片进行展示及预览，经过查阅相关资料发现，大致有三种实现方案，下面将依次展开进行解释。

实现方案

使用 HTML 标签
- iframe 标签
- embed 标签
- object 标签
使用第三方插件
- PDF.js
- PDFObject
PDF 文件转化成图片进行展示

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

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

第三类方案：PDF 文件转化成图片进行展示的兼容性最好，能同时在 PC 端和移动端预览，但需要后端进行配合。

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 标签实现方案代码如下所示：

<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 是基于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 文档，所以不能选中文本或复制文本。

具体步骤如下：

首先 npm i pdfjs-dist 下载 pdf.js 的 Prebuilt 包
设置 PDFJS.GlobalWorkerOptions.workerSrc 的地址
通过 PDFJS.getDocument（pdf 文件的 url）处理 pdf 数据，返回一个 PDFDocumentLoadingTask
通过 pdfDoc.getPage（i）单独获取第 i 页的数据
创建一个 canvas 元素，并设置元素的画布属性
通过 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 中的文本。

具体步骤如下：

去官网下载打包好的 Prebuilt 版本压缩包
将需要打开的 PDF 文档放到与 viewer.html 文档的同一目录下
新建一个 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.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，插入的 PDF 文件路径，以及插入到哪个容器
可以选择使用 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 转换为图片需要后端配合，但是兼容性好，也是在开发中首选的方案。

本文借鉴了该文章

前端实现PDF预览

前言