How To Open A Local Pdf In Pdfjs Using File Input?

September 29, 2023 Post a Comment

I would like to know if there is a way to select a pdf file using input type='file' and open it using PDFJS

Solution 1:

You should be able to use a FileReader to get the contents of a file object as a typed array, which pdfjs accepts (https://mozilla.github.io/pdf.js/examples/)

//Step 1: Get the file from the input element                
inputElement.onchange = function(event) {

    var file = event.target.files[0];

    //Step 2: Read the file using file readervar fileReader = newFileReader();  

    fileReader.onload = function() {

        //Step 4:turn array buffer into typed arrayvar typedarray = newUint8Array(this.result);

        //Step 5:pdfjs should be able to read thisconst loadingTask = pdfjsLib.getDocument(typedarray);
        loadingTask.promise.then(pdf => {
            // The document is loaded here...
        });
                    

    };
    //Step 3:Read the file as ArrayBuffer
    fileReader.readAsArrayBuffer(file);
 
 }

Edit: The pdfjs API changed at some point since I wrote this first answer in 2015. Updating to reflect the new API as of 2021(thanks to @Chiel) for the updated answer

Solution 2:

If getDocument().then is not a function:

I reckon I have managed to solve the new problem with the new API. As mentioned in this GitHub issue, the getDocument function now has an promise added to itself. In short, this:

PDFJS.getDocument(typedarray).then(function(pdf) {
    // The document is loaded here...
});

became this:

const loadingTask = pdfjsLib.getDocument(typedarray);
loadingTask.promise.then(pdf => {
    // The document is loaded here...
});

Adapting the older answer to the new api to comply to the bounty gives the following result:

//Step 1: Get the file from the input element                
inputElement.onchange = function(event) {

    //It is important that you use the file and not the filepath (The file path won't work because of security issues)var file = event.target.files[0];

    var fileReader = newFileReader();  

    fileReader.onload = function() {

        var typedarray = newUint8Array(this.result);

        //replaced the old function with the new apiconst loadingTask = pdfjsLib.getDocument(typedarray);
            loadingTask.promise.then(pdf => {
                // The document is loaded here...
            });

    };
    //Step 3:Read the file as ArrayBuffer
    fileReader.readAsArrayBuffer(file);

 }

I have created an example below with the official releases of the source code below to show that it is working.

/*Offical release of the pdfjs worker*/
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.js';
document.getElementById('file').onchange = function(event) {
  var file = event.target.files[0];
  var fileReader = newFileReader();
  fileReader.onload = function() {
    var typedarray = newUint8Array(this.result);
    console.log(typedarray);
    const loadingTask = pdfjsLib.getDocument(typedarray);
    loadingTask.promise.then(pdf => {
      // The document is loaded here...//This below is just for demonstration purposes showing that it works with the moderen api
      pdf.getPage(1).then(function(page) {
        console.log('Page loaded');

        var scale = 1.5;
        var viewport = page.getViewport({
          scale: scale
        });

        var canvas = document.getElementById('pdfCanvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas contextvar renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        var renderTask = page.render(renderContext);
        renderTask.promise.then(function() {
          console.log('Page rendered');
        });

      });
      //end of example code
    });

  }
  fileReader.readAsArrayBuffer(file);
}

<html><head><!-- The offical release--><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.js"></script></head><body><inputtype="file"id="file"><h2>Rendered pdf:</h2><canvasid="pdfCanvas"width="300"height="300"></canvas></body></html>

Hope this helps! If not, please comment.

Note:

This might not work in jsFiddle.

Solution 3:

I adopted your code and it worked! Then I was browsing for more tips here and there, then I learned there is an even more convenient method.

You can get the URL of client-loaded file with

URL.createObjectURL()

It reduces nesting by one level and you don't need to read the file, convert it to array, etc.

Html5 Log