Embed PDF using pdf.js to the webpage

Question

pdf.js is a bit big project for a newbie like me. As most post said this project is great tool to embed a PDF file into web. But I'm quite having a hard time figuring this out of how to use it.

What I want to know is how can I embed a local PDF file using pdf.js?

I'm not sure, because I'm not a PC user, but try `var url = 'file:///C:/';` — Ruben Kazumov, Nov 02 '13 at 03:54
I have two pdf files in my local one is `test.pdf` and one is `another test.pdf`. I tried this paths `file:///C:/resource/pdf/another%20test.pdf` and `file:///C:/resource/pdf/test.pdf` none of them is working — user2785929, Nov 02 '13 at 04:17
Have you a chance to open your browser in a [debug mode](http://developer.chrome.com/extensions/tut_debugging.html) and check availability of the file resource? — Ruben Kazumov, Nov 02 '13 at 04:22
I tried the chrome `F12` and the error is `Not allowed to load local resource: file:///C:/resource/pdf/test.pdf#` any thoughts about it? — user2785929, Nov 02 '13 at 04:30
`file://C:/resource/pdf/test.pdf` `file://C:\resource\pdf\test.pdf`? — Ruben Kazumov, Nov 02 '13 at 04:38
The error is `Not allowed to load local resource: file:///C:/%0Desourcepdf%09est.pdf`. I really don't understand this. or it is no really possible from local path? — user2785929, Nov 02 '13 at 04:47
I believe it is Chrome issue. You have to read this: http://www.html5rocks.com/en/tutorials/file/filesystem/ — Ruben Kazumov, Nov 02 '13 at 04:51
Use a path relative to the webpage, not an absolute path which traverses up from the root of the file system. — user229044, Nov 02 '13 at 04:57
I also tried it in firefox. It has the same result. The link you posted, it seems that Its a tutorial of how do I use file system. The reason I used pdf.js is to avoid manually code this xD. — user2785929, Nov 02 '13 at 05:02
@meagar, I see. Do i have to do that programmatically? And actually I don't know how can I make a relative path with local file in it. — user2785929, Nov 02 '13 at 05:06

score 1 · Answer 1 · edited Mar 20 '14 at 15:04

You can give relative URL, e.g pdfPath="pdf/TestDocument.pdf".

Following is a sample code created out of examples provided on Github:

PDFJS.workerSrc ='PATH_TO_WORKER_LOADER/worker_loader.js';
pdfDoc = PDFJS.getDocument(pdfPath);
pdfDoc.then(renderPdf);

function renderPdf(pdfDoc) {

      pdfNumPages = pdfDoc.numPages;

    pdfDoc.getPage(1).then(renderPage);
}

function renderPage(page) {

    var viewport = page.getViewport(scale);
    var $canvas = jQuery("<canvas></canvas>");
    //Set the canvas height and width to the height and width of the viewport
    var canvas = $canvas.get(0);
    var context = canvas.getContext("2d");
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //Append the canvas to the pdf container div (refer a div in your HTML file)
    var $editorTextArea = jQuery("#editorTextArea");
    $editorTextArea.css("height", canvas.height + "px").css("width", canvas.width + "px");
    $editorTextArea.append($canvas);

    var canvasOffset = $canvas.offset();
    var $textLayerDiv = jQuery("<div />")
        .addClass("textLayer")
        .css("height", viewport.height + "px")
        .css("width", viewport.width + "px")
        .offset({
            top: canvasOffset.top,
            left: canvasOffset.left
        });

    //The following few lines of code set up scaling on the context if we are on a HiDPI display
    var outputScale = getOutputScale(context);
    if (outputScale.scaled) {
        var cssScale = 'scale(' + (1 / outputScale.sx) + ', ' +
            (1 / outputScale.sy) + ')';
        CustomStyle.setProp('transform', canvas, cssScale);
        CustomStyle.setProp('transformOrigin', canvas, '0% 0%');
    }

    context._scaleX = outputScale.sx;
    context._scaleY = outputScale.sy;
    if (outputScale.scaled) {
        context.scale(outputScale.sx, outputScale.sy);
    }
        var renderContext = {
            canvasContext: context,
            viewport: viewport,
            textLayer: textLayer
        };
        page.render(renderContext);
    });
}

Embed PDF using pdf.js to the webpage

1 Answers1