How to read and display a PDF using JavaScript

Last updated: September 27, 2022.

A PDF file can be read in a web browser by JavaScript using the native FileReader API.

By setting the result of this file reading to be the creation of a new URL that points to the file temporarily stored in memory in a user’s browser, it is possible to display the content of the PDF in the DOM.

This can be useful for giving a user a preview of a selected file before it is uploaded to the server.

We'll be working with the following basic markup:

<div>
  <input id="input" type="file">
</div>
<div>
  <div id="output"></div>
</div>

Using the FileReader API

Reading the file

Now in JavaScript, we program it so that when a user selects a local file using the HTML<input> element, the FileReader() constructor is called, creating a new object of its type.

An object created this way has all the methods available on it that are necessary to read files.

We use one of these, readAsDataURL(), below. This reads the file and creates a URL pointing to the read file in temporary memory in the user's browser:

const inputEl = document.getElementById('input');

inputEl.addEventListener('change', function() {

  // Creates new FileReader instance
  const fr = new FileReader();

  // Create temporary URL for user-selected file
  fr.readAsDataURL(inputEl.files[0]);

});

Accessing the URL

Because the reading of the file is not instant, you cannot access the URL pointing tot he file immediately.

Instead, you need to attach a load event listener to the new FileReader object you have created. This will fire when the file has been read and the result is available.

The URL is available on the result property of the FileReader object:

const inputEl = document.getElementById('input');

inputEl.addEventListener('change', function() {

  const fr = new FileReader();
  fr.readAsDataURL(inputEl.files[0]);

  fr.addEventListener('load', function() {

    console.log(fr.result); 
    // data:application/pdf;base64,JVBERi0xLjYKJeLjz9MKMyAwIG9i...
    
  });

});

The URL looks unusual because it doesn't point to an external resource but one held temporarily in memory.

But for practical purposes, in JavaScript the URL can be used in the same way as one pointing to an external resource (e.g. used to set an src or data attribute).

Viewing the PDF in the DOM

Finally, to allow the read PDF to be viewed in the DOM, you need to use the URL you have created to set as the data source of a HTML element.

You could use an <iframe> for this purpose. But here, to avoid creating an embedded window, the <object> element is used:

inputEl.addEventListener('change', function() {

  const fr = new FileReader();
  fr.readAsDataURL(inputEl.files[0]);

  fr.addEventListener('load', function() {

    // Append result to DOM in <object> element:
    const obj = document.createElement('object');
    obj.data = fr.result;
    obj.type='application/pdf';
    obj.width = "800px";
    obj.height = "900px";
    document.getElementById('output').appendChild(obj);

  });
});

Related links

• W3Schools: HTML<object> tag
• MDN Web Docs: FileReader()

---