Abstract
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 https://github.com/mozilla/pdf.js. 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 https://mozilla.github.io/pdf.js/getting_started/#download. Select the appropriate version to download.
release file
Download and unzip
After downloading, we get the file pdfjs-2.14.305-dist.zip, unzip pdfjs-2.14.305-dist.zip 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;">
</iframe>
PDF.js in project
Summarize
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 https://mozilla.github.io/pdf.js/getting_started/#download
2. Unzip and move the pdfjs-2.14.305-dist.zip 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 weichaoxu1998@gmail.com
