PDF.js 学习笔记

Posted 2022-02-17 笑虾

PDF.js 学习笔记

• 默认显示目录
• • 暴力解决方案
  • 设置页面 Titele
• 其它分析
• • 想看看官方支持哪些事件
  • 本地项目分析（版本老一下）
  • • PDFOutlineViewer
• 参考资料

• PDF预览用这个效果很666

默认显示目录

暴力解决方案

• 文件位置
  /pdfview/web/viewer.html
• 请求地址带参数 automark=true

		var automark = setInterval(function() 
            if (PDFViewerApplication.pdfDocument != null) 
              clearInterval(automark);
              if(new URLSearchParams(location.search).get('automark'))
                PDFViewerApplication.pdfSidebar.open(); // 打开侧边栏;
                PDFViewerApplication.pdfSidebar.switchView(2); // 显示目录
              else
                PDFViewerApplication.pdfSidebar.close(); // 隐藏侧边栏;
              
            
          , 50);

• 如果不想看到空目录框先出来碍眼，需要添加下事件

		// 取url参数
        var params = Object.fromEntries(new URLSearchParams(location.search));
		var automark = setInterval(function() 
            if (PDFViewerApplication.pdfDocument != null) 
            	console.log(PDFViewerApplication.pdfOutlineViewer);
            	clearInterval(automark);
	            if(params.automark)
	                PDFViewerApplication.pdfOutlineViewer.eventBus.on('outlineloaded',function(data)
						PDFViewerApplication.pdfSidebar.open(); // 打开侧边栏;
	                    PDFViewerApplication.pdfSidebar.switchView(2); // 显示目录
					);                
	            else
	                PDFViewerApplication.pdfSidebar.close(); // 隐藏侧边栏;
	            
            
          , 50);

设置页面 Titele

• 我用的青阳文件共享，这里默认显示文件id。

// 取url参数
var params = Object.fromEntries(new URLSearchParams(location.search));
var automark = setInterval(function() 
         if (PDFViewerApplication.pdfDocument != null) 
           PDFViewerApplication.setTitle(params.title); // 设置页面标题
         
       , 50);

• 也可以简单粗暴一点

document.title = new URLSearchParams(location.search).get('file');

其它分析

想看看官方支持哪些事件

没时间慢慢分析代码，先百度一下别人的战果。得知关键字eventBus。
搜了一下，发现我用的版本是eventBus.on仓库的新版改成eventBus._on了。
为了缩小范围，我们直接搜一下，注意github会忽略：. , : ; / \\ ' " = * ! ? # $ & + ^ | ~ < > ( ) [ ] @
所以我们搜eventBus _on 发现 pdf.js/web/app.js 中间这段：(看来支持的事件在这了，找找有没有我们想要的吧)

 bindEvents() 
    const  eventBus, _boundEvents  = this;

    _boundEvents.beforePrint = this.beforePrint.bind(this);
    _boundEvents.afterPrint = this.afterPrint.bind(this);

    eventBus._on("resize", webViewerResize);
    eventBus._on("hashchange", webViewerHashchange);
    eventBus._on("beforeprint", _boundEvents.beforePrint);
    eventBus._on("afterprint", _boundEvents.afterPrint);
    eventBus._on("pagerendered", webViewerPageRendered);
    eventBus._on("updateviewarea", webViewerUpdateViewarea);
    eventBus._on("pagechanging", webViewerPageChanging);
    eventBus._on("scalechanging", webViewerScaleChanging);
    eventBus._on("rotationchanging", webViewerRotationChanging);
    eventBus._on("sidebarviewchanged", webViewerSidebarViewChanged);
    eventBus._on("pagemode", webViewerPageMode);
    eventBus._on("namedaction", webViewerNamedAction);
    eventBus._on("presentationmodechanged", webViewerPresentationModeChanged);
    eventBus._on("presentationmode", webViewerPresentationMode);
    eventBus._on("print", webViewerPrint);
    eventBus._on("download", webViewerDownload);
    eventBus._on("save", webViewerSave);
    eventBus._on("firstpage", webViewerFirstPage);
    eventBus._on("lastpage", webViewerLastPage);
    eventBus._on("nextpage", webViewerNextPage);
    eventBus._on("previouspage", webViewerPreviousPage);
    eventBus._on("zoomin", webViewerZoomIn);
    eventBus._on("zoomout", webViewerZoomOut);
    eventBus._on("zoomreset", webViewerZoomReset);
    eventBus._on("pagenumberchanged", webViewerPageNumberChanged);
    eventBus._on("scalechanged", webViewerScaleChanged);
    eventBus._on("rotatecw", webViewerRotateCw);
    eventBus._on("rotateccw", webViewerRotateCcw);
    eventBus._on("optionalcontentconfig", webViewerOptionalContentConfig);
    eventBus._on("switchscrollmode", webViewerSwitchScrollMode);
    eventBus._on("scrollmodechanged", webViewerScrollModeChanged);
    eventBus._on("switchspreadmode", webViewerSwitchSpreadMode);
    eventBus._on("spreadmodechanged", webViewerSpreadModeChanged);
    eventBus._on("documentproperties", webViewerDocumentProperties);
    eventBus._on("findfromurlhash", webViewerFindFromUrlHash);
    eventBus._on("updatefindmatchescount", webViewerUpdateFindMatchesCount);
    eventBus._on("updatefindcontrolstate", webViewerUpdateFindControlState);

    if (AppOptions.get("pdfBug")) 
      _boundEvents.reportPageStatsPDFBug = reportPageStatsPDFBug;

      eventBus._on("pagerendered", _boundEvents.reportPageStatsPDFBug);
      eventBus._on("pagechanging", _boundEvents.reportPageStatsPDFBug);
    
    if (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) 
      eventBus._on("fileinputchange", webViewerFileInputChange);
      eventBus._on("openfile", webViewerOpenFile);
    
  ,

紧随其后是一个bindWindowEvents() ...方法，window相关的事件没跑了。

• PDFViewerApplication 全局对象 pdf.js/web/viewer.js

window.PDFViewerApplication = PDFViewerApplication;
window.PDFViewerApplicationOptions = AppOptions;

本地项目分析（版本老一下）

我本地的版本老了点，搜到的是：viewer.js 这个

  bindEvents: function bindEvents() 
    var eventBus = this.eventBus,
        _boundEvents = this._boundEvents;

    _boundEvents.beforePrint = this.beforePrint.bind(this);
    _boundEvents.afterPrint = this.afterPrint.bind(this);
    eventBus.on('resize', webViewerResize);
    eventBus.on('hashchange', webViewerHashchange);
    eventBus.on('beforeprint', _boundEvents.beforePrint);
    eventBus.on('afterprint', _boundEvents.afterPrint);
    eventBus.on('pagerendered', webViewerPageRendered);
    eventBus.on('textlayerrendered', webViewerTextLayerRendered);
    eventBus.on('updateviewarea', webViewerUpdateViewarea);
    eventBus.on('pagechanging', webViewerPageChanging);
    eventBus.on('scalechanging', webViewerScaleChanging);
    eventBus.on('sidebarviewchanged', webViewerSidebarViewChanged);
    eventBus.on('pagemode', webViewerPageMode);
    eventBus.on('namedaction', webViewerNamedAction);
    eventBus.on('presentationmodechanged', webViewerPresentationModeChanged);
    eventBus.on('presentationmode', webViewerPresentationMode);
    eventBus.on('openfile', webViewerOpenFile);
    eventBus.on('print', webViewerPrint);
    eventBus.on('download', webViewerDownload);
    eventBus.on('firstpage', webViewerFirstPage);
    eventBus.on('lastpage', webViewerLastPage);
    eventBus.on('nextpage', webViewerNextPage);
    eventBus.on('previouspage', webViewerPreviousPage);
    eventBus.on('zoomin', webViewerZoomIn);
    eventBus.on('zoomout', webViewerZoomOut);
    eventBus.on('pagenumberchanged', webViewerPageNumberChanged);
    eventBus.on('scalechanged', webViewerScaleChanged);
    eventBus.on('rotatecw', webViewerRotateCw);
    eventBus.on('rotateccw', webViewerRotateCcw);
    eventBus.on('documentproperties', webViewerDocumentProperties);
    eventBus.on('find', webViewerFind);
    eventBus.on('findfromurlhash', webViewerFindFromUrlHash);
    eventBus.on('fileinputchange', webViewerFileInputChange);
  ,

PDFOutlineViewer

PDFViewerApplication.pdfOutlineViewer 大纲的一些操作都在这里。

事件名	介绍
outlineloaded	大纲加载完成事件

PDFViewerApplication.pdfOutlineViewer.eventBus.on('outlineloaded',function(data)
    console.log(data);
);

至于window事件找下window.addEventListener跑不掉的。

• PDFViewerApplication 全局对象 pdfview/web/viewer.js我这用的是青阳文件共享系统。PDF浏览器的相关操作基本都在这里面了。比如：

 appConfig.sidebar.toggleButton.addEventListener('click', function () 
   PDFViewerApplication.pdfSidebar.toggle();
 );

所有配置信息一个对象的引用都到这里找找看：
PDFViewerApplication.appConfig

参考资料

源码仓库 github
源码仓库 gitcode加速

官方文档
Hello World 交互实例