How to import and use PDF.js in a new project?


In the previous blog, several pdf webviewer solutions were introduced and compared, including WebViewer and PDF.js. In the end, the open source PDF.js was chosen. In this post you will learn : How to import and use PDF.js in a new project?

Keywords: website , pdf viewer , PDF.js , import , use.

PDF.js project structure

The github project address of PDF.js is The github project details the progress of PDF.js,  such as issues, examples, etc. You can start the PDF.js develop version according to the tutorial in github project. But this is a very complicated process, which may cause the project to fail to start normally due to too many dependencies. The screenshots below are only used to show the process of starting the development version.

It is not recommended for beginners to modify the develop version directly and then build the release version by themselves. Because there are better options, we can directly choose the official Mozilla release version to introduce into the project. This will be covered in the second part of this blog post.

PDF.js tutorial

Import PDF.js

As introduced in the first part, the develop PDF.js environment that built by ourselves may fail, and when we import it into our own project, we also need to build, and we also face the risk of failure. Mozilla officially released PDF.js, so in order to save time and ensure to success, we can choose this version, and then import it into our project. The operation flow are as follows.

Official release version

Go to the official release website Select the appropriate version to download.

release file

Download and unzip

After downloading, we get the file, unzip to the folder pdfjs-2.14.305-dist, the folder structure of pdfjs-2.14.305-dist is as follows.

folder structure

Move folder

Move the pdfjs-2.14.305-dist file to the public document of your project, and rename pdfjs-2.14.305-dist to pdfjs for convenience. Now, the public folder is as follow, the most important file of PDF.js is the viewer.html, which is the entry file of PDF.js.

pdfjs folder

Import viewer.html

Use the <iframe> tag to import viewer.html file on the page where the document needs to be displayed. The following code is available in HTML5 and Vue.js projects.

The figure below shows that I successfully imported PDF.js into the vue-now-ui-kit-master project, so that the project has our own PDF viewer. 

					<iframe loading="lazy" src="pdfjs/web/viewer.html" frameborder="0" width="100%" height="700px;">


PDF.js in project


If you want to import PDF.js into your own project, you can build it by yourself, but this is a time-consuming task and prone to mistakes by novices. Therefore, we can directly choose to introduce the officially released version of Mozilla into the project, which can be done easily through the following steps.

					1. Download the prebuilt version from
2. Unzip and move the file to the public folder
3. Rename pdfjs-2.14.305-dist to pdfjs
4. Import viewer.html with <iframe> tag
5. Start the project to view the effection

Through the above methods, we import PDF.js into the project, which allows us to open local pdf file, but if we encounter CORS documents loaded from the server, additional processing is required. For specific methods, please refer to related articles.

Related articles

Coming soon

If yuo have any question or need any help 

you can leave a comment or connect me with

Leave a Reply

Your email address will not be published. Required fields are marked *

Chaoxu Wei

Master student at Tongji University (Writer & Blogger)

Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me, thank you very much!


Edit Template

“There are many people in the world who want to work hard but can’t, and people who work too hard and are exhausted. Please don’t use your efforts only to chase your own victory, please use them to help others.”




Yangpu District, Shanghai