PDF.js 学习笔记

Posted 笑虾

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了PDF.js 学习笔记相关的知识,希望对你有一定的参考价值。

  • 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

参考资料

https://github.com/mozilla/pdf.js

以上是关于PDF.js 学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

学习笔记:python3,代码片段(2017)

[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段

pdf.js在IIS中配置使用笔记

DOM探索之基础详解——学习笔记

学习笔记 链接

ReactJs学习笔记01