This method can help integrate PDF documents seamlessly into your web pages, offering an interactive and user-friendly experience without requiring users to download or open the document in a separate viewer.
Why Display PDFs in HTML Using JaScript?Displaying PDFs directly in HTML can be a game-changer for your users. Instead of forcing them to download a separate file and open it in another app, you can embed the document within the webpage itself. This not only makes it more accessible but allows you to enhance the experience with custom controls, annotations, and interactivity.
With PDFs embedded in your site, you can:
Improve accessibility by allowing users to view documents without downloading. Add interactive elements like forms, buttons, or quizzes. Provide a more polished, professional look by seamlessly integrating PDFs into your page design.To display a PDF file in HTML, we will use a JaScript library called PDF.js, which is an open-source library by Mozilla for rendering PDF documents in a web browser.
Download the PDF.js library from here. Extract the files to a folder on your computer.Create a new HTML file in your text editor. Add a element inside the tags where the PDF will be displayed.
In the of your HTML file, include references to the PDF.js library files that you downloaded.
Create a new JaScript file with the following code. This will load and display the first page of the PDF in your container.
var url = '/path/to/your/pdf/file.pdf'; pdfjsLib.getDocument(url).promise.then(function(pdf) { pdf.getPage(1).then(function(page) { var canvas = document.createElement('canvas'); var container = document.getElementById('viewerContainer'); container.appendChild(canvas); var viewport = page.getViewport({ scale: 1 }); canvas.height = viewport.height; canvas.width = viewport.width; var ctx = canvas.getContext('2d'); var renderContext = { canvasContext: ctx, viewport: viewport }; page.render(renderContext); }); });Make sure to replace /path/to/your/pdf/file.pdf with the actual path to your PDF.
At the end of the section of your HTML file, include the reference to your JaScript file.
Se your files and open the HTML file in a browser. The PDF should now appear inside the element.
Common FAQsWhy isn't my PDF showing up in the browser?
Make sure the PDF file path is correct and that your web server is configured to serve the PDF file. Also, check your browser’s developer console for any errors.
My PDF isn't scaled properly. How can I adjust this?
Use the scale property in the getViewport() method to adjust the PDF’s size.
For example:
var viewport = page.getViewport({ scale: 1.5 });How can I add nigation controls, like next and previous buttons?
You can create custom buttons in HTML and attach event listeners to nigate through pages. Example:
NextThen, in JaScript, increment the page number:
var currentPage = 1; document.getElementById('nextButton').addEventListener('click', function() { currentPage++; pdf.getPage(currentPage).then(function(page) { // Render the next page }); });By following this simple approach, you can easily display PDF documents in your HTML pages using JaScript. PDF.js provides a lot of flexibility, and you can add custom controls, such as zoom, page nigation, and annotations, to enhance the user experience.
Tan Lee