In this article (a five-minute read), you’ll learn about two simple (and free!) approaches to displaying PDFs in the browser and how you can quickly implement them in your website. Show Native Browser PDF RenderingSince PDF is such a widely used format, all modern browsers have built-in PDF support. We can take advantage of this by using HTML elements to embed a PDF directly in our web page, like this: Here’s the code: I’ve used a URL for the The PDF viewer’s user interface will look a bit different depending on your browser: PDF Viewer Embedded in Website in ChromePDF Viewer Embedded in Website in SafariPDF Viewer Embedded in Website in FireFoxPDF Viewer Embedded in Website in EdgeThis approach will work in all modern desktop and mobile versions of Chrome, Safari, Firefox, and Edge. (It will not work in Internet Explorer.) If you need to support Internet Explorer or customize the user interface, you should consider the next approach -- PDF.js rendering. Embed PDF in HTML With Free PDF.js Express ViewerPDF.js Express Viewer is a free PDF.js viewer that wraps a modern React-based UI around the open-source PDF.js rendering engine. PDF.js was originally developed by Mozilla and is maintained by an open-source community. PDF.js Express Viewer allows you to render PDFs inside a web page by using JavaScript instead of the browser’s built-in PDF support. The benefits of PDF.js Express Viewer compared to native browser rendering are:
PDF.js Express Viewer HTML ExampleHere is what we will make after following this tutorial: Adding PDF.js Express Viewer to your website is an easy 3 step process. Here we will be doing a manual integration, however, we have guides for integrating PDF.js Express Viewer with many frameworks, including React, Angular, Vue, and much more. You can find a full list of framework guides here Step 1 - Download PDF.js Express ViewerYou can click here to download PDF.js Express Viewer. Note that to use the PDF.js Express Viewer you will need a free license key. Please get your free Viewer key here if you do not have one.
To import PDF.js Express Viewer as a CommonJS module, please refer to this guide to integrate with NPM Once you have done this an example project directory might look something like this: In this sample directory you can add the folders: images, scripts, and styles to include any extra resources you would like to have on your website. However for this example project it is only necessary to have the extracted
The easiest way to run this project would be with Next open your terminal and install Once installed navigate to the root of your website's directory in the terminal and run the following command: After running that command go to your browser and type localhost:8080. You should then see the following: Step 3 - Use PDF.js Express Viewer APIs to customize the viewerTo use more PDF.js Express APIs, you can add the API calls in the callback of the PDF.js Express constructor. For example, to change the theme of PDF.js Express to dark, you can add: Refresh your application page ( ConclusionWe hope this was helpful! You can also have a look at , which extends the functionality of PDF.js Express Viewer with PDF annotation, form filling, and signing inside your web app. |