This allows you to do most things that you’re also able to do manually in the browser, and one of those things is generating a PDF from your website. Puppeteer is a Node library that gives you an API to control a headless Chrome or Chromium instance. The end result will look like what’s shown below. However, this time, you’ll render the invoice template to the div element. Similar to the example above, you’ll use the generatePDF() function to download the invoice as a PDF. You can also generate the HTML for your own invoice on your backend if you prefer. You can download it by clicking this link. We provided an invoice template to download as a PDF. In the next example, you’ll use a more complex HTML structure. However, you can render any HTML element, including images, tables, and more. In the example above, you only rendered the h1 title.

Choose the element and save the PDF for your user.īutton.addEventListener(' click', generatePDF) const element = document.getElementById(' invoice') Choose the element that your content will be rendered to. If you prefer this method, add a script tag to your HTML file:Ĭonst button = document.getElementById(' download-button') To get started, install the html2pdf library. jsPDF then takes the image and converts it to a PDF file.Ĭheck out How to Convert HTML to PDF Using React for a step-by-step guide on how to use jsPDF in a React app. Html2canvas renders an HTML page into a canvas element and turns it into a static image. It uses html2canvas and jsPDF under the hood. The html2pdf library converts HTML pages to PDFs in the browser. Lastly, we’ll cover the advantages and disadvantages of both libraries. In this post, we’ll take a look at two popular JavaScript libraries for converting HTML pages to PDFs. For example, invoices, concert tickets, and flight tickets tend to be available as PDF downloads. The following line of jsPDF code instantiates and uses the jsPDF object in JavaScript.This article was first published in March 2019 and was updated in November 2022.Ī common use case in JavaScript for HTML-to-PDF conversion is giving your website visitors the ability to download HTML content as a PDF file. Here we create an HTML table with some design by CSS and also create a button where the user can click and download the HTML page as a PDF.Īlso Read: Export MySQL Data to Excel in PHP Using Ajax Instantiate jsPDF Class Download html page as pdf using JavaScript JS Create an HTML Content Div With CSS ĭemo of how to convert and Download HTML page to PDF file with CSS, using JavaScript and jQuery.

Javascript download page as pdf