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
参考资料
以上是关于PDF.js 学习笔记的主要内容,如果未能解决你的问题,请参考以下文章
[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段