原文链接: https://segmentfault.com/a/1190000016963084

前不久，产品经理提出要在界面上优雅地展示PDF文档，立即就有了两种实现方法：

实现方法一
使用embed符号来使用浏览器自带的pdf工具。

这种实现方法优错误谬误都很明显：
长处：自带“打印”，“搜索”，“翻页”等成果，强大且实现便利。
错误谬误：差别浏览器的pdf工具样式不一，且无法满足本性化需求，好比：禁止打印，下载等。

我们的产品经理是挑剔的??，于是...

实现方法二
使用Mozilla的PDF.js，自界说展示PDF。

下面我们就细致讲述一下使用PDF.js过程中遇到的问题。主要包孕：

根本成果集成

使用Text-Layers衬着

什么是PDF.JS

PDF.js是基于HTML5技术构建的，用于展示可移植文档格局的文件(PDF)，它可以在现代浏览器中使用且无需安置任何第三方插件。

根本成果集成

1??引用

首先，引用PDF.js就遇到了问题，官网中提到通过CDN引用或者下载源码至本地。
而我们并不想污染我们的index.html并且但愿可以对每一个引用的框架有统一的版本打点。于是，我们搜寻到一个包：pdfjs-dist。

通过npm install pdfjs-dist，我们引入了PDF.js。

根本成果有两个必需引用的文件：

pdf.js

pdf.worker.js

如果使用CDN的方法，直接引用如下对应文件即可：

https://mozilla.github.io/pdf...

https://mozilla.github.io/pdf...

如果使用npm的方法，则在需要使用PDF.js的文件中如下引用:

import PDFJS from ‘pdfjs-dist‘; PDFJS.GlobalWorkerOptions.workerSrc = ‘pdfjs-dist/build/pdf.worker.js‘;

这两个文件包罗了获取、解析和展示PDF文档的要领，但是解析和衬着PDF需要较长的时间，可能会梗阻其它JS代码的运行。

为解决该问题，pdf.js依赖了HTML5引入的Web Workers——通过从主线程中移除大量CPU操纵（如解析和衬着）来提升性能。

PDF.js的API城市返回一个Promise，使得我们可以优雅的措置惩罚惩罚异步操纵。

2??使用

首先，我们需要在HTML中添加<canvas>元素以衬着PDF：

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

然后添加衬着PDF的js代码：

var url = ‘Helloworld.pdf‘; PDFJS.getDocument(url).then((pdf) => { return pdf.getPage(1); }).then((page) => { // 设置展示比例 var scale = 1.5; // 获取pdf尺寸 var viewport = page.getViewport(scale); // 获取需要衬着的元素 var canvas = document.getElementById(‘pdf-canvas‘); var context = canvas.getContext(‘2d‘); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); });

此刻，PDF已经告成衬着在界面上了。我们来分析一下使用到的函数：

getDocument()：用于异步获取PDf文档，发送多个Ajax请求以块的形式下载文档。它返回一个Promise，该Promise的告成回调通报一个东西，该东西包罗PDF文档的信息，该回调中的代码将在完成PDf文档获取时执行。

getPage()：用于获取PDF文档中的各个页面。

getViewport()：针对供给的展示比例，返回PDf文档的页面尺寸。

render()：衬着PDF。

到这里，根基成果告一段落了。
满心欢喜筹备上线的时候，产品经理提出了另一个需求：文本复制。
然鹅。。。翻了好几遍官方文档，也没有找到文本复制的要领，并且stackoverflow上有很多类似的问题。
在不停的测验考试下，我们发明了Text-Layer。

使用Text-Layers衬着

PDF.js撑持在使用Canvas衬着的PDF页面上衬着文本图层。然而，这个成果需要用到特别的两个文件：text_layer_builder.js和text_layer_builder.css。我们可以在GitHub的repo中获取到。

如果是使用npm，则需要做如下引用：

import { TextLayerBuilder } from ‘pdfjs-dist/web/pdf_viewer‘; import ‘pdfjs-dist/web/pdf_viewer.css‘;

此刻，我们开始实现文本复制成果。

首先，创建衬着需要用到DOM节点：

<div id="container"></div>

div#container为最外层节点，在该div中，我们会为PDF的每个页面创建本身的div，在每个页面的div中，城市有Canvas元素。

接着，我们改削JS代码：