pdf.js取消工具栏

业务需求,在手机上显示,去掉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还留在那里。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容