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. 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.

Download puppeteer typescript