使用xshen-pdf预览PDF，配置简单，不依赖于iframe

爱冥想的咕
263 阅读2分钟

xshen-pdf是我正在开发的一款开源的PDF阅读器，基于pdf.js-4.6.82版本。旨在在pdf.js的基础上，开发出一个配置简单、易于操作、集成方便、功能丰富的pdf阅读器。目前尚未发布第一个release版本。

在xshen-pdf中，初始化PDF阅读器将会非常的简单。只需要像下面一样，指定好对应的dom元素，然后init一下就好了：

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

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

目前这个初始化方式已经初步实现了，达成的效果如下：

preview.png

这里展示PDF还是比较简单的。但是因为刚开始做，所以只是简单的渲染了一个页面。通过修改参数，xshen-pdf可以任意选择渲染的页面。后续我将持续的改进init方法，直到实现现在viewer.html所具备的全部功能。

这个功能看起来较为简单，但是实际上实现起来还不算太简单。由于pdf.js的大部分的web界面相关的代码都放在/web/目录下，而非/src/目录下，这导致代码之间的引用比较麻烦。而我的目标是将xshen-pdf开发成一个强大且灵活的框架。因此原来在/web/目录下的代码，都要迁移到/src/目录下。但是移动过程并不是简单的拷贝，因为很多引用关系比较特别。

pdf.js通过importmap来处理文件映射，具体的示例如下：

<script type="importmap">
  {
    "imports": {
      "pdfjs/": "../src/",
      "pdfjs-lib": "../src/pdf.js",
      "pdfjs-web/": "./",

      "fluent-bundle": "../node_modules/@fluent/bundle/esm/index.js",
      "fluent-dom": "../node_modules/@fluent/dom/esm/index.js",
      "cached-iterable": "../node_modules/cached-iterable/src/index.mjs",
      ....
    }
  }
</script>

这导致迁移过的代码，引用关系都需要调整。不过好在没有特别难以调整的文件。调整完之后，我把viewer.html依赖的功能文件都迁移到src/viewer/目录下之后，并在src目录下创建了一个seren.html。这个文件就可以直接使用源代码的相关函数和对象来创建PDF阅读器，并不再依赖于iframe。

展示页面只是功能的一小部分。其主要依赖于两个对象，一个是PDFPageView，代表着一个单一的PDFPageView页面。另一个是PDFViewer，代表着整个PDF阅读器，控制展示一个个的单页面。

接下来我将围绕着这两个对象，完成这两个对象的API化，也是达成xshen-pdf的第一个小目标。

avatar
文章
阅读
粉丝