Pdf.js: Compose an example for the single page viewer

[timvandermeij]

In pull request #8724 a single page viewer has been implemented. It would be nice to have a components example in the examples folder that demonstrates how to use this viewer.

[pixelexel]

Hi! I'd like to address this issue. This is my first time solving an issue on Github so I'd love it if you could help me to figure out how to get started.
I've already got a local copy running with the gulp server.

[timvandermeij]

There are component examples in the https://github.com/mozilla/pdf.js/tree/master/examples/components folder. The objective of this patch is to add an example that uses PDFSinglePageViewer. Like the other examples there, it can just load the default Tracemonkey PDF file.

[pixelexel]

Thanks! I'll try to work on this.

[pixelexel]

So, I'm getting a little confused here. This is what I understood:
In the components folder, pageviewer.js is an example that uses pdf_page_view.js to display pdf files normally. I need to create an example like singlepageviewer.js that uses pdf_single_page_viewer.js.

Am I along the right path so far?

So basically is this what I need to edit from the pageviewer.js file so that it makes use of the single page viewer?

return pdfDocument.getPage(PAGE_TO_VIEW).then(function (pdfPage) {
    // Creating the page view with default parameters.
    var pdfPageView = new PDFJS.PDFPageView({
      container: container,
      id: PAGE_TO_VIEW,
      scale: SCALE,
      defaultViewport: pdfPage.getViewport(SCALE),
      // We can enable text/annotations layers, if needed
      textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
      annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory()
    });
    // Associates the actual page with the view, and drawing it
    pdfPageView.setPdfPage(pdfPage);
    return pdfPageView.draw();
  });

Here is what singlepageviewer.js contains as the edited portion:

return pdfDocument.getPage(PAGE_TO_VIEW).then(function (pdfPage) {
    // Creating the page view with default parameters.
    var pdfSinglePageView = new PDFJS.PDFSinglePageViewer({
      container: container,
      id: PAGE_TO_VIEW,
      scale: SCALE,
      defaultViewport: pdfPage.getViewport(SCALE),
      // We can enable text/annotations layers, if needed
      textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
      annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory()
    });
    // Associates the actual page with the view, and drawing it
    pdfSinglePageView.setPdfPage(pdfPage);
    return pdfSinglePageView.draw();
  });

Is my approach so far making sense?

Thanks a lot for your time!

Reposting comment with proper formatting.

[Snuffleupagus]

In the components folder, pageviewer.js is an example that uses pdf_page_view.js to display pdf files normally. I need to create an example like singlepageviewer.js that uses pdf_single_page_viewer.js.

Considering that PDFSinglePageViewer implements the same interface as PDFViewer, basing the new example on https://github.com/mozilla/pdf.js/blob/master/examples/components/simpleviewer.js would be a much more appropriate starting point.

[pixelexel]

Thanks for that advice!
I've submitted a pull request https://github.com/mozilla/pdf.js/pull/8989. Please review it and let me know if any changes are to be made.

Edit:
I don't know if I'm missing something here but none of the components examples display anything in the browser at http://localhost:8888/examples/components/{anyfile}.html. Console shows the following errors:

singlepageviewer.html:38 GET http://localhost:8888/node_modules/pdfjs-dist/web/pdf_viewer.css net::ERR_ABORTED
singlepageviewer.html:40 GET http://localhost:8888/node_modules/pdfjs-dist/build/pdf.js net::ERR_ABORTED
singlepageviewer.html:41 GET http://localhost:8888/node_modules/pdfjs-dist/web/pdf_single_page_viewer.js net::ERR_ABORTED
singlepageviewer.js:18 Uncaught ReferenceError: PDFJS is not defined
    at singlepageviewer.js:18

[Snuffleupagus]

I don't know if I'm missing something here but none of the components examples display anything in the browser at http://localhost:8888/examples/components/{anyfile}.html. Console shows the following errors:

As mentioned in the *.js files of the examples, see e.g. here, did you run gulp dist-install?

[pixelexel]

Got it thanks!
Here's the pull request including all your reviewed changes and according to the Contributing and Squashing Commits wiki : https://github.com/mozilla/pdf.js/pull/8990
Thanks a lot for your time!