pdfjs源码学习（四）

kristyzhangwx

已于 2025-01-22 15:54:49 修改

阅读量468

点赞数 5

分类专栏： pdfjs源码学习文章标签：学习 javascript 开发语言 pdf 前端

于 2025-01-22 15:06:37 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43511800/article/details/145302795

版权

pdfjs源码学习专栏收录该内容

4 篇文章

订阅专栏

pdfjs是绘制页面流程（一）

pdfjs源码大致分三层，如下图：
在这里插入图片描述

pdf页面绘制流程

在这里插入图片描述

pdfViewer 由多个pdfPageView组成

pdfPageView中存储了每个页面相关的信息（pdfPageProxy，pageviewport，canvasLayer，textLayer，annotationLayer等）

让我们来捋一下pdf页面的渲染过程，这个过程感觉像在翻译代码= =

首次渲染时，会触发pdfPageView中的update方法，然后获取可视范围内的页码范围，将可视的页码范围交给pdfRenderingQueue处理，设置当前页码

update() {
    const visible = this._getVisiblePages();
   	……
    this.renderingQueue.renderHighestPriority(visible);
    ……
    this._setCurrentPageNumber(
      stillFullyVisible ? currentId : visiblePages[0].id
    );
  }

pdfRenderingQueue会调用pdfViewer的forceRendering优先处理可视范围内的正文页面的渲染

renderHighestPriority(currentlyVisiblePages) {
    if (this.idleTimeout) {
      clearTimeout(this.idleTimeout);
      this.idleTimeout = null;
    }

    // Pages have a higher priority than thumbnails, so check them first.
    if (this.pdfViewer.forceRendering(currentlyVisiblePages)) {
      return;
    }

pdfViewer获取渲染优先级最高的页面进行渲染

forceRendering(currentlyVisiblePages) {
    const visiblePages = currentlyVisiblePages || this._getVisiblePages();
    const scrollAhead = this.#getScrollAhead(visiblePages);
    const preRenderExtra =
      this._spreadMode !== SpreadMode.NONE &&
      this._scrollMode !== ScrollMode.HORIZONTAL;

    const pageView = this.renderingQueue.getHighestPriority(
      visiblePages,
      this._pages,
      scrollAhead,
      preRenderExtra
    );

这里的优先级顺序可以看源代码，大概就是获取遍历visiblePage的范围，首先被遍历到的但是还没有渲染完的pageView首先被返回

如果所有的visible views都渲染完了，就开始渲染下一页（如果是向下滚动，向上滚动的话就是渲染上一页）

将找到的渲染优先级最高的pageView交给pdfRenderingQueue的renderView处理

forceRendering(currentlyVisiblePages) {
 	this.renderingQueue.renderView(pageView);

renderView 根据当前pageView的渲染状态做不同的处理

const RenderingStates = {
 INITIAL: 0, // 初始化, 调用 view的draw方法 ，并在结束后，调用renderHighestPriority绘制下一个渲染优先级最高的页面
 RUNNING: 1, // 进行中，标记highestPriorityPage为当前的pageView
 PAUSED: 2,  //暂停， view.resume()  恢复渲染
 FINISHED: 3,  // 结束， return false
};

以上就是pdf页面渲染的大致流程，感谢阅读，如有错误或建议，欢迎评论区留言！

下次讲讲pdfjs分片下载的实现过程