ng2-pdf-viewer: Cannot read property 'div' of undefined

- [x] bug report -> please search issues before submitting
- [ ] feature request

When page changed it’s success to change the page number, but It’s failed when scrolling to the page because of this error :

ERROR TypeError: Cannot read property 'div' of undefined
    at PDFViewer._resetCurrentPageView (pdf_viewer.js:1556)
    at PDFViewer._setCurrentPageNumber (pdf_viewer.js:1281)
    at PDFViewer.set (pdf_viewer.js:1858)
    at eval (pdf-viewer.component.js:258)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4620)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at ZoneTask.invokeTask (zone.js:499)
    at ZoneTask.invoke (zone.js:488)

I’m using Angular 5.0.3 and ng2-pdf-viewer 3.0.2

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 15
  • Comments: 16 (1 by maintainers)

Most upvoted comments

I had the same problem. I fixed it by removing [stick-to-page]="true" from my html definition. You should try to check your configuration.

I had the same error and I fixed it with following changes.

  • ng2-pdf-viewer has a dependency called pdfjs-dist. You can find it in node_modules.
  • Open this file -> node_modules/pdfjs-dist/web/pdf_viewer.js
  • In pdf_viewer.js file, search for this line of code -> var elt = views[index].div; It is inside ‘backtrackBeforeAllVisibleElements’ function.
  • Change that code line to var elt = views[index-1].div; and save.

I’m using single-pdf-viewer and I had a similar problem:

Unable to initialize viewer TypeError: Cannot read property 'div' of undefined
    at PDFSinglePageViewer._ensurePageViewVisible (vendor.js:128660)
    at vendor.js:128635
    at vendor.js:125843
    at Array.forEach (<anonymous>)
    at EventBus.dispatch (vendor.js:125842)
    at vendor.js:126729
    at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:2749)
    at Object.onInvoke (vendor.js:69038)
    at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:2748)
    at Zone.push.../../node_modules/zone.js/dist/zone.js.Zone.run (polyfills.js:2508)

In a node_modules, in a file ‘pdf_viewer.js’ (node_modules/pdfjs-dist/web/pdf_viewer.js) from line 3326 starts method:

value: function _ensurePageViewVisible() {
            var pageView = this._pages[this._currentPageNumber - 1];
            var previousPageView = this._pages[this._previousPageNumber - 1];
            var viewerNodes = this.viewer.childNodes;
            switch (viewerNodes.length) {
              case 0:
                this.viewer.appendChild(pageView.div);
                break;
              case 1:
                if (viewerNodes[0] !== previousPageView.div) {
                  throw new Error('_ensurePageViewVisible: Unexpected previously visible page.');
                }
                if (pageView === previousPageView) {
                  break;
                }
                this._shadowViewer.appendChild(previousPageView.div);
                this.viewer.appendChild(pageView.div);
                this.container.scrollTop = 0;
                break;
              default:
                throw new Error('_ensurePageViewVisible: Only one page should be visible at a time.');
            }
            this._previousPageNumber = this._currentPageNumber;
          }

Problem was that ‘pageView.div’ was ‘undefined’, and solution was simple:

if (pageView !== undefined) {
    this.viewer.appendChild(pageView.div);
}

so method looks like:

value: function _ensurePageViewVisible() {
            var pageView = this._pages[this._currentPageNumber - 1];
            var previousPageView = this._pages[this._previousPageNumber - 1];
            var viewerNodes = this.viewer.childNodes;
            switch (viewerNodes.length) {
              case 0:
                if (pageView !== undefined) {
                  this.viewer.appendChild(pageView.div);
                }
                // this.viewer.appendChild(pageView.div);
                break;
              case 1:
                if (viewerNodes[0] !== previousPageView.div) {
                  throw new Error('_ensurePageViewVisible: Unexpected previously visible page.');
                }
                if (pageView === previousPageView) {
                  break;
                }
                this._shadowViewer.appendChild(previousPageView.div);
                this.viewer.appendChild(pageView.div);
                this.container.scrollTop = 0;
                break;
              default:
                throw new Error('_ensurePageViewVisible: Only one page should be visible at a time.');
            }
            this._previousPageNumber = this._currentPageNumber;
          }

pdf viewer container should be not be in collapsible panel. container Div should be open. no any animation to open div.

I am also getting the error cannot read property of undefined when I pop a page which renders the PDF in ionic.

core.js:1449 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'div' of undefined
TypeError: Cannot read property 'div' of undefined
    at backtrackBeforeAllVisibleElements (pdf_viewer.js:558)
    at getVisibleElements (pdf_viewer.js:605)
    at PDFViewer._getVisiblePages (pdf_viewer.js:5400)
    at PDFViewer.forceRendering (pdf_viewer.js:5080)
    at PDFRenderingQueue.renderHighestPriority (pdf_viewer.js:4191)
    at continueRendering (pdf_viewer.js:4256)
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4760)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at backtrackBeforeAllVisibleElements (pdf_viewer.js:558)
    at getVisibleElements (pdf_viewer.js:605)
    at PDFViewer._getVisiblePages (pdf_viewer.js:5400)
    at PDFViewer.forceRendering (pdf_viewer.js:5080)
    at PDFRenderingQueue.renderHighestPriority (pdf_viewer.js:4191)
    at continueRendering (pdf_viewer.js:4256)
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4760)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4751)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)

I am using Ionic 3.20.0 and ng2-pdf-viewer ^5.1.1

I got the same error when I incorporate pdf-viewer into a MatDialog and close the dialog.