Readme should have `npm install pdf.js` on how to use... And a better tutorial. (I've added a suggestion on how could be improved)

I think is a big oversight forgetting to add this, I had to open package.json to figure out if was even on npm… I haven’t seen a readme without npm install ... for long time. and this seem like a big project.

[stevemarksd]

Tutorial could be so much better. I’m talking about https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples . When I first read I feel like I’m in 2010 using jquery…

How to actually use it with yarn/npm

Installation

Install: yarn add pdfjs-dist @types/pdfjs-dist (replace yarn add for npm install if you use npm. Also remove @types/pdfjs-dist if you don’t use typescript. (anyone still uses npm or vanilla js??)

Setup

Webpack specific code (if you use yarn, you most likely use webpack or a bundler) so I think this example makes more sense than using the cdn

// We need to get the url of the worker (we use min for prod)
import workerSrc from '!!file-loader!pdfjs-dist/build/pdf.worker.min.js'

// Use require because import doesn't work for some obscure reason. Also use `webpackChunkName` so it will not bundle this huge lib in your main code
const pdfjsLib = require(/* webpackChunkName: "pdfjs-dist" */ `pdfjs-dist`)

// Now you assign the worker file path to the `pdfjsLib` (yes, it's that cumbersome)
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc

Usage

Add a <canvas id="pdf-canvas"/> to your HTML.

Then in a js file put:

    // Loads the actual pdf
    const pdf = await pdfjsLib.getDocument(props.url).promise

    // Opens page 1?
    const page = await pdf.getPage(1)

    // Creates or gets a viewport?
    const viewport = page.getViewport({scale: 1})

    const canvas = document.getElementById('pdf-canvas')
    const context = canvas.getContext('2d')
    canvas.width = 600
    canvas.height = 300

    const renderContext = {
      canvasContext: context,
      viewport: viewport,
    }
    await page.render(renderContext).promise

This is what I’d expect from a tutorial TBH. Yes, I complain about it, but I also give you a way to improve.

Why I think this is better?

• Concise
• To the point
• Clear code

Minor details in guides

All these small details gives me the impression of a poorly written library. (even if it might not be)

canvas.height = viewport.height;
canvas.width = viewport.width;

Why in the world would you switch width, height order to height, width? Just wasted time to fix bug where I expected width and height ordering.

Promises async await

Mentions await in many places, but tutorial is loadingTask.promise.then… let’s write some nice code with async await

Still on es5?

vars, no arrow functions…

Naming

const loadingTask = pdfjsLib.getDocument(props.url), loadingTask is weird

the-canvas… come on…

[codydbentley]

I know this is closed, but I have to also agree with @stevemarksd. Despite being very popular, there is a lot of room for improvement in this library’s docs. Googling this library and how to use it almost always lands on the mozilla.github.io page, which does not have anything anywhere about using yarn or npm. Steve’s answer gave me enough information about how to solve it for my own use. Only after coming here did I find out it was buried in the FAQ under a question completely unrelated to using a package manager. And even then, it only tells me something I already knew, which was to install the pdfjs-dist library, but nothing about how to get it to actually work after installing.

We don’t want to advertise all individual examples separately in the README since it would make it much bigger than necessary and big README files may be even less inviting to actually read. In my experience it’s pretty common to just Ctrl + F for “example” and find them.

You don’t have to include an example for every webpack config possible, you just need any example of importing the lib and using it manually without knowing the inner workings of the core, and most people can figure it out from there.

Ideally, like most modern frameworks, it’s desirable to be as simple as this:

npm install pdfjs-dist
or
yarn add pdfjs-dist

import pdfjsLib from 'pdfjs-dist'
or
pdfjsLib = require('pdfjs-dist')

let loadingTask = pdfjsLib.getDocument('..')
... // follow the existing examples from here

That is good enough and covers most use cases without going into specifics of webpack configs etc. However, I’m assuming due to the inner workings of the core, it requires setting up stuff with the worker manually. But as long as you can show one example of importing/requiring the pieces and putting them together to make a working pdfjsLib, people can figure out the specifics for their dev environment and then follow the examples from there.