How to create a JavaScript PDF viewer | Envato Tuts+ https://webdesign.tutsplus.com/how-to-create-a-pdf-viewer-in-javascrip...
4 currentPage: 1,
5 zoom: 1
6 }
7
8 // more code here
9 </script>
At this point, we can load our PDF file by calling the getDocument() method of
the pdfjsLib object, which runs asynchronously.
1 pdfjsLib.getDocument('./my_document.pdf').then((pdf) => {
2
3 // more code here
4
5 });
Note that the getDocument() method internally uses
an XMLHttpRequest object to load the PDF file. This means that the
file must be present either on your own web server or on a server
that allows cross-origin requests.
If you don’t have a PDF file handy, you can get the one I’m using from
Wikipedia.
Once the PDF file has been loaded successfully, we can update
the pdf property of our state object.
1 myState.pdf = pdf;
Lastly, add a call to a function named render() so that our PDF viewer in JS
automatically renders the first page of the PDF file. We’ll define the function in
the next step.
1 render();
4 . Ren der i n g a Pa ge
5 of 18 9/10/2025, 7:40 PM
How to create a JavaScript PDF viewer | Envato Tuts+ https://webdesign.tutsplus.com/how-to-create-a-pdf-viewer-in-javascrip...
4 . Ren der i n g a Pa ge
By calling the getPage() method of the pdf object and passing a page
number to it, we can get a reference to any page in the PDF file. For now, let's
pass the currentPage property of our state object to it. This method too
returns a promise, so we’ll need a callback function to handle its result.
Accordingly, create a new function called render() containing the following
code:
1 function render() {
2 myState.pdf.getPage(myState.currentPage).then((page) => {
3
4 // more code here
5
6 });
7 }
To actually render a page, we must call the render() method of
the page object available inside the callback. As arguments, the method
expects the 2D context of our canvas and a PageViewport object, which we
can get by calling the getViewport() method. Because
the getViewport() method expects the desired zoom level as an argument,
we must pass the zoom property of our state object to it.
1 var canvas = document.getElementById("pdf_renderer");
2 var ctx = canvas.getContext('2d');
3
4 var viewport = page.getViewport(myState.zoom);
The dimensions of the viewport depend on the original size of the page and
the zoom level. In order to make sure that the entire viewport is rendered on
our canvas, we must now change the size of our canvas to match that of the
viewport. Here’s how:
1 canvas.width = viewport.width;
2 canvas.height = viewport.height;
At this point, we can go ahead and render the page.
6 of 18 9/10/2025, 7:40 PM
