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);
});
});
HTML object
element
The HTML object
element is a generic container for external multimedia resources.
It is appropriate to use for resources that do not have their own element tag (i.e. not for images, audio or video).
Related links
- W3Schools: HTML<object> tag
- MDN Web Docs: FileReader()