How to Use pdf.js

Question

I am considering using pdf.js (an open source tool that allows embedding of a pdf in a webpage). There isn't any documentation on how to use it.

I assume what I do is make an html page with the script referenced in the header, and then in the body, I put some sort of function call with an array of the file name and location. Can anyone help me out here?

Solution 1

Try Google'ing pdf.js documentation

/* create the PDF document */

var doc = new pdf();
doc.text(20, 20, 'hello, I am PDF.');
doc.text(20, 30, 'i was created in the browser using javascript.');
doc.text(20, 40, 'i can also be created from node.js');

/* Optional - set properties on the document */
doc.setProperties({
  title: 'A sample document created by pdf.js',
  subject: 'PDFs are kinda cool, i guess',        
  author: 'Marak Squires',
  keywords: 'pdf.js, javascript, Marak, Marak Squires',
  creator: 'pdf.js'
});

doc.addPage();
doc.setFontSize(22);
doc.text(20, 20, 'This is a title');
doc.setFontSize(16); 
doc.text(20, 30, 'This is some normal sized text underneath.');

var fileName = "testFile"+new Date().getSeconds()+".pdf";
var pdfAsDataURI = doc.output('datauri', {"fileName":fileName});

NOTE: the "pdf.js" project mentioned here is https://github.com/Marak/pdf.js, and has been deprecated since this answer was posted. @Treffynnon's answer is about the still-active Mozilla project (https://github.com/mozilla/pdf.js) that most searchers will be looking for.

Solution 2

There is documentation available on their github readme. They cite the following example code:

/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */

//
// See README for overview
//

'use strict';

//
// Fetch the PDF document from the URL using promises
//
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
  // Using promise to fetch the page
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    //
    // Prepare canvas using PDF page dimensions
    //
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //
    // Render PDF page into canvas context
    //
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

Comments

[Chris]

I saw that but I am confused about the stuff above the var=filename. Do I need any of that doc.addPage() to doc.text, and hte triple doc.texts above that?

[Chris]

Another question would be what do I have to change. I assume the last line's first "filename" I have to change, and the doc properties. Is that it?

[Swiss]

Isn't this a different pdf.js?

[James Hill]

@Swiss, this is from February, with upvotes, and marked as the answer. I'd say this is what the OP was looking for.

[Swiss]

Yeah that's why it was so confusing. The op seemingly is referring to the mozilla project for displaying pdfs as html, but the project referred to in the blog you link to is a different one for creating pdf files using javascript.

[Craig Lafferty]

It's not well documented but you extract the pdf.js zip and leave its directory structure intact. Then to view a pdf you simply navigate to the viewer.html file (via browser) with the file appended to the end. E.x. yoursite.com/directory_that_viewer_._html_is_in/viewer.html?‌​file=somepdfthatyouh‌​ave.pdf The pdf location is just passed as a GET variable to the viewer.html file.

[James Hill]

@Commenters, yes, I recognize the confusion here. Having said that, many folks have found this useful and I don't want to delete it, nor do I know enough about the other pdf.js to update it. It'll remain as is in the hopes that it will continue to help some.

[tforgione]

First link is not found, and second link is deprecated...

[Philzen]

From the github wiki: "However, we do ask if you plan to embed the viewer in your own site, that it not just be an unmodified version. Please re-skin it or build upon it." - given their hideously non-existent api documentation this project makes sure you jump through enough hoops to stay in shape :\