美文网首页前端
pdf.js取消工具栏

pdf.js取消工具栏

作者: 鸿宇 | 来源:发表于2019-03-12 14:46 被阅读0次

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

相关文章

网友评论

    本文标题:pdf.js取消工具栏

    本文链接:https://www.haomeiwen.com/subject/rxxnpqtx.html