Pdf.js: build without the generic viewer

Created on 15 Apr 2017 · 10Comments · Source: mozilla/pdf.js

I just need to use the API (I want to create a custom viewer)

How to...

build WITHOUT the generic viewer
build with all dependencies
compatible with all browsers
build a worker file together with one pdf.js file where all source files are merged together

# npm install -g gulp-cli
# cd /path/to/pdfjs
# npm install
# gulp bundle

/var/www/pdfjs/node_modules/webpack/lib/webpack.js:7
const Compiler = require("./Compiler");
^^^^^
SyntaxError: Use of const in strict mode.
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/var/www/pdfjs/gulpfile.js:36:16)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)

1-other 3-regression

Source

clarkk

Most helpful comment

What is pdf_viewer.js for? I keep getting

Uncaught (in promise) TypeError: Cannot read property 'getDirection' of undefined
    at webViewerLocalized (pdf_viewer.js:5173)

I'm trying out pageviewer because it looks more like the old version I have used

Is it not possible just to grap pdf.js, pdf_worker.js and textlayer-something and make it work like in the good old days? I don't need the whole project

clarkk on 16 Apr 2017

👍4

All 10 comments

If you just want to use the API, you can use https://github.com/mozilla/pdfjs-dist (build folder). Take a look at https://github.com/mozilla/pdf.js/blob/master/examples/helloworld/hello.js for how to use the API. You can use viewer components (https://github.com/mozilla/pdf.js/tree/master/examples/components) for creating your own viewer.

If you want to build it yourself, gulp bundle is indeed the way to go. Make sure that you use the most up-to-date versions of the dependencies (use npm update). The failure you're listing is Webpack-related and not PDF.js-related.

timvandermeij on 15 Apr 2017

Shouldn't it work if I copy build from pdfjs-dist in the root of this repository?

clarkk on 16 Apr 2017

Shouldn't it work if I copy build from pdfjs-dist in the root of this repository?

if you install pdfjs-dist as a package, require('pdfjs-dist/build/pdf'); shall give you what you need

yurydelendik on 16 Apr 2017

I dont get it.. I just need the mentioned pdf.js (I don't want the generic viewer included in the used files to reduce the total file size)

I also need textselection

I get this error

hello.js:29 Uncaught (in promise) TypeError: PDFJS.DefaultTextLayerFactory is not a constructor
    at hello.js:29

Here I use pdf.js from pdfjs-dist/build

<!doctype html>
<html>

<head>
    <script src="pdf.js"></script>
  <script src="hello.js"></script>
</head>

<body>
  <canvas id="the-canvas" style="border:1px solid black;"/>
</body>

</html>

hello.js

Here I use pdf.worker.js from pdfjs-dist/build

'use strict';

PDFJS.workerSrc = 'pdf.worker.js';

var DEFAULT_URL = 'helloworld.pdf';
var PAGE_TO_VIEW = 1;
var SCALE = 1.0;

var container = document.getElementById('the-canvas');

// Loading document.
PDFJS.getDocument(DEFAULT_URL).then(function (pdfDocument) {
  // Document loaded, retrieving the page.
  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();
  });
});

clarkk on 16 Apr 2017

It looks like you're using the simpleviewer components example. In that case, you also need https://github.com/mozilla/pdf.js/blob/master/examples/components/simpleviewer.html#L41 for viewer features like DefaultTextLayerFactory. Note that this file is not equal to the entire generic viewer we provide, but instead contains the necessities to create a custom components-based viewer.

I would advice to first try to get the provided examples (in the examples directory of this repository) running before attempting to adjust them. It will make modifications easier if you start from a working version first.

timvandermeij on 16 Apr 2017

Actually I have used an about 1-2 years old version of PDF.js in a previuos project..

At that time it was really easy to get it running.. I cant say that now.. Have already tried the simpleviewer version but cant make anything work..

But will give it one more try

clarkk on 16 Apr 2017

What is pdf_viewer.js for? I keep getting

Uncaught (in promise) TypeError: Cannot read property 'getDirection' of undefined
    at webViewerLocalized (pdf_viewer.js:5173)

I'm trying out pageviewer because it looks more like the old version I have used

Is it not possible just to grap pdf.js, pdf_worker.js and textlayer-something and make it work like in the good old days? I don't need the whole project

clarkk on 16 Apr 2017

👍4

I tried this in an empty folder:

git clone https://github.com/mozilla/pdf.js
cd pdf.js
npm install
gulp dist
gulp server

Then I visited http://localhost:8888/examples/components/simpleviewer.html where I see this in the console:

TypeError: _ui_utils.mozL10n is undefined
TypeError: _dom_events.domEvents is undefined

So it's not just you; something seems to have regressed in the recent ES6 conversion (judging by the underscores, it may be Babel). Reopening and labeling as a regression for now.

timvandermeij on 16 Apr 2017

But a very striped version (without the generic viewer) only with pdf.js, pdf_worker.js and the textlayer thing would really help..

And without all these new "helper" files around it.. Its just noise :)

clarkk on 16 Apr 2017

The regressions have been fixed and the examples are working again. The steps outlined in https://github.com/mozilla/pdf.js/issues/8292#issuecomment-294376046 should make all examples work for you as well. I think most problems you decribed happened because we have been refactoring the codebase to use ES6 syntax and you uncovered something we forgot about during the refactoring.

The pageviewer/simpleviewer examples are about as easy as it gets while still having the functionality you ask for, so I don't think there is more we can do here. Of course, if you feel improvements can be made, feel free to submit a pull request for review. Closing for now as all actionable issues seem to have been resolved.

timvandermeij on 17 Apr 2017

Was this page helpful?

0 / 5 - 0 ratings