重构pdfjs阅读器viewer.html，实现双PDF对比（不依赖iframe、embed）

针对pdfjs做二次开发的xshen-pdf仍在继续开发着，不过离第一个可用的版本发布还有一段时间。我正在按部就班的一步步向前推进中。

过去的一个星期，我将pdfjs的viewer.html里面的代码完整地梳理了一遍。并将里面的代码核心的代码提取出来，重新封装了一遍。并在国庆前，初步的实现了目标------直接通过div就可以渲染出一个PDF阅读器，而无需再使用iframe或者embed标签来嵌套引入pdf阅读器。

通常情况下，想要使用pdfjs提供的阅读器，就必须通过iframe、embed标签，或者window.open之类的方式打开一个独立的pdfjs的html页面（也就是viewer.html），这种方式实际上不太友好。它有着诸多问题，比如不太好控制、难以和其它组件联动、难以纳入一个页面的全局管理。因此我希望能够改进这一点，基于pdfjs，将PDF阅读器改造的像echarts那样易于配置和使用。开发者只需要声明一个div，然后调用初始化方法将这个div初始化成一个PDF阅读器即可。

在经过解构和重新封装之后，现在xshen-pdf能够实现这个功能了。想要在页面上渲染出一个或者多个PDF阅读器，只需要寥寥几行代码就够了。在html中，只需要声明一个或多个dom元素就可以了：

html 复制代码

<body>
  <div id="container" style="width: 48%; display: inline-block;height: 1000px;"></div>
  <div id="container2" style="width: 48%; display: inline-block;height: 1000px;"></div>
</body>

在这里，我声明了两个容器，因为我想展示一下基于xshen-pdf实现的双PDF对比功能。在声明完容器之后，再使用两行js代码，初始化一下这两个阅读器就可以了：

javascript 复制代码

import { Seren } from "./viewer/seren.js";

Seren.init('container',{ firstPage : 1});
Seren.init('container2',{ firstPage : 1});

渲染出来的结果如下所示：

通过上面的dom元素可以看到，id为container和container2的两个容器都被成功渲染出来了。

解构viewer.html和重新封装里面的组件，并不算一件容易的事。因为viewer.html默认是个全局的、唯一的PDF阅读器，因此里面很多地方都在使用全局变量，很多地方都在使用window对象、处理window事件，很多地方都使用了"宏"。简而言之就是一句话，默认提供的阅读器和全局环境耦合的地方较多。而我的目标是要将pdfjs变成一个能够直接引进html页面中的组件，开发者想怎么声明，就怎么声明。想怎么控制PDF阅读器，就怎么控制PDF阅读器。因此这些地方的代码全部都要拆掉重写，才能让PDF阅读器由一个必须通过嵌入才能操作的全局对象，变成一个可通过API自由操控的局部对象。因此，解耦就是我要做的首要工作。

全局参数AppOptions耦合，其实是一个比较麻烦的点。如果有的开发者对PDF阅读器有一些了解，那么他是可以通过AppOptions来修改PDF阅读器的参数。但是官方似乎并没有提供一个比较正式的API让开发者来修改这些参数。因此开发者想要修改一些参数，只能通过一些"不那么正规"的方式来达成自己的目的。这种方式自然也是有弊端的。这样做不好的地方就在于日后难以维护、升级pdfjs版本的时候可能会产生问题。

因为pdfjs提供的阅读器默认情况下只有一个，因此它大量使用了全局变量来对阅读器进行管理。将PDF阅读器进行局部化处理之后------即开发者通过函数来创建一个个PDF阅读器实例，这么做就不行了。当我们声明了多个阅读器的时候，每个阅读器读取的pdf文件、配置的功能、批注、权限可能是完全不同的。因此很多配置项应该是只能局部生效，而不能全局生效。但是仅仅有局部的配置项也是不够的。对于开发者创建的若干pdf阅读器，有时候也是需要全局统一控制的，例如白天/夜晚模式、是否分页加载等。因此，除了针对单个阅读器的配置项管理，还需要全局的配置项管理。在xshen-pdf里我分别定义了两个类，一个是ViewerOptions，针对单个阅读器生效。一个是SerenOptions，针对多个阅读器生效。通过这两个选项，开发者就能够很方便的配置和管理好自己的一个或多个PDF阅读器了。