PDF.js

https://mozilla.github.io/pdf.js/
Admin
PDF.js is a general-purpose, web standards-based platform for parsing and rendering PDFs.
Tokens:2,507
Snippets:6
Trust Score:8.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Clone PDF.js Repository

Source: https://mozilla.github.io/pdf.js/getting_started

Instructions to clone the PDF.js project from GitHub using Git. This is the first step to obtaining the source code for local development or inspection.

```shell
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
```

--------------------------------

### Render PDF Page to Canvas

Source: https://mozilla.github.io/pdf.js/examples

Renders a PDF page onto an HTML canvas element. This involves getting the page's viewport, setting up the canvas dimensions, and creating a render context with the canvas, transform, and viewport information.

```javascript
var scale = 1.5;
var viewport = page.getViewport({ scale: scale });
// Support HiDPI-screens.
var outputScale = window.devicePixelRatio || 1;

var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');

canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height =  Math.floor(viewport.height) + "px";

var transform = outputScale !== 1
  ? [outputScale, 0, 0, outputScale, 0, 0]
  : null;

var renderContext = {
  canvasContext: context,
  transform: transform,
  viewport: viewport
};
page.render(renderContext);
```

--------------------------------

### Get a Specific Page from PDF Document

Source: https://mozilla.github.io/pdf.js/examples

Retrieves a specific page from a loaded PDF document. The getPage method returns a promise that resolves with the page object, which can then be used for rendering.

```javascript
pdf.getPage(1).then(function(page) {
  // You can now use the 'page' object here
});
```

--------------------------------

### Scale PDF Page Rendering by Width

Source: https://mozilla.github.io/pdf.js/examples

Calculates the appropriate scale to render a PDF page to a specific pixel width. This involves getting the default viewport, determining the scale factor, and then creating a new viewport with the calculated scale.

```javascript
var desiredWidth = 100;
var viewport = page.getViewport({ scale: 1, });
var scale = desiredWidth / viewport.width;
var scaledViewport = page.getViewport({ scale: scale });
```

--------------------------------

### Handle PDF Document Loading Promise

Source: https://mozilla.github.io/pdf.js/examples

Demonstrates how to handle the promise returned by pdfjsLib.getDocument. The .then() callback receives the PDF document object, allowing subsequent operations like fetching pages.

```javascript
var loadingTask = pdfjsLib.getDocument('helloworld.pdf');
loadingTask.promise.then(function(pdf) {
  // You can now use the 'pdf' object here
});
```

--------------------------------

### Load PDF Document with PDF.js

Source: https://mozilla.github.io/pdf.js/examples

Initiates the loading of a PDF document using the pdfjsLib.getDocument method. This function returns a PDFDocumentLoadingTask, which contains a promise that resolves with the PDF document object upon successful loading.

```javascript
var loadingTask = pdfjsLib.getDocument('helloworld.pdf');
```
Tokens:
Raw