业务需求,在手机上显示,去掉pdfjs的工具栏,下载button等一律不要了。
pdfjs网址:https://github.com/mozilla/pdf.js
使用中发现该工程使用webpack打包,我对这个却不是很懂。于是考虑从编程规范入手:
发现:
<pre>
function getViewerConfiguration() {
return {
appContainer: document.body,
mainContainer: document.getElementById('viewerContainer'),
viewerContainer: document.getElementById('viewer'),
eventBus: null,
toolbar: {
container: document.getElementById('toolbarViewer'),
numPages: document.getElementById('numPages'),
pageNumber: document.getElementById('pageNumber'),
scaleSelectContainer: document.getElementById('scaleSelectContainer'),
scaleSelect: document.getElementById('scaleSelect'),
customScaleOption: document.getElementById('customScaleOption'),
previous: document.getElementById('previous'),
next: document.getElementById('next'),
zoomIn: document.getElementById('zoomIn'),
zoomOut: document.getElementById('zoomOut'),
viewFind: document.getElementById('viewFind'),
openFile: document.getElementById('openFile'),
print: document.getElementById('print'),
presentationModeButton: document.getElementById('presentationMode'),
download: document.getElementById('download'),
viewBookmark: document.getElementById('viewBookmark')
},
secondaryToolbar: {
toolbar: document.getElementById('secondaryToolbar'),
toggleButton: document.getElementById('secondaryToolbarToggle'),
toolbarButtonContainer: document.getElementById('secondaryToolbarButtonContainer'),
presentationModeButton: document.getElementById('secondaryPresentationMode'),
openFileButton: document.getElementById('secondaryOpenFile'),
printButton: document.getElementById('secondaryPrint'),
downloadButton: document.getElementById('secondaryDownload'),
viewBookmarkButton: document.getElementById('secondaryViewBookmark'),
firstPageButton: document.getElementById('firstPage'),
lastPageButton: document.getElementById('lastPage'),
pageRotateCwButton: document.getElementById('pageRotateCw'),
pageRotateCcwButton: document.getElementById('pageRotateCcw'),
toggleHandToolButton: document.getElementById('toggleHandTool'),
documentPropertiesButton: document.getElementById('documentProperties')
},
...
}
</pre>
然后发现项目入口:
run: function pdfViewRun(config) {
this.initialize(config).then(webViewerInitialized);
}
PDFViewerApplication的initialize方法,--> webViewerInitialized
最后定位到 13687行的webViewerInitialized方法,在该方法最后添加如下语句。
<pre>
appConfig.toolbar.presentationModeButton.setAttribute('hidden', 'true');
appConfig.toolbar.openFile.setAttribute('hidden', 'true');
appConfig.toolbar.print.setAttribute('hidden', 'true');
appConfig.toolbar.download.setAttribute('hidden', 'true');
appConfig.toolbar.viewBookmark.setAttribute('hidden', 'true');
appConfig.secondaryToolbar.toolbar.setAttribute('hidden', 'true');
appConfig.secondaryToolbar.toogleButton.classList.add('hidden');
appConfig.secondaryToolbar.toolbarButtonContainer.setAttribute('hidden', 'true');
appConfig.secondaryToolbar.presentationModeButton.setAttribute('hidden', 'true');
appConfig.secondaryToolbar.openFileButton.setAttribute('hidden', 'true');
appConfig.secondaryToolbar.printButton.setAttribute('hidden', 'true');
appConfig.secondaryToolbar.downloadButton.setAttribute('hidden', 'true');
appConfig.secondaryToolbar.viewBookmarkButton.setAttribute('hidden', 'true');
appConfig.secondaryToolbar.firstPageButton.setAttribute('hidden', 'true');
appConfig.secondaryToolbar.lastPageButton.setAttribute('hidden', 'true');
appConfig.secondaryToolbar.pageRotateCwButton.setAttribute('hidden', 'true');
appConfig.secondaryToolbar.pageRotateCcwButton.setAttribute('hidden', 'true');
appConfig.secondaryToolbar.toggleHandToolButton.setAttribute('hidden', 'true');
appConfig.secondaryToolbar.documentPropertiesButton.setAttribute('hidden', 'true');
</pre>
结果:
遗憾是:右边的那个toogleButton还留在那里。