If you need something quickly and don’t want to build anything on your server to create PDF files, you’re good to go with html2pdf. The main disadvantage of using Puppeteer is that you’ll need to run a server instead of generating the PDF on the client. Additionally, the file size is significantly lower compared to the html2pdf example, Puppeteer’s resulting PDF is about four times smaller. You’ll be able to select and copy the text from the PDF, and you don’t need to worry about resolution since it’ll always be sharp. The biggest advantage of Puppeteer is that it creates an actual PDF file with text content instead of just using an image. Then we’ll call this function in a download button:

To begin, we first define a generatePDF() function that will get the element we’ve rendered the invoice in and then call html2pdf with that element to download it directly on our users’ client. You can download it from the GitHub repository, or if you already have a bundler in your site, you can install it via npm or yarn. I downloaded the bundled html2pdf JavaScript library directly and imported it to our site. However, you can easily generate the HTML for your own invoice in your backend if you prefer. For our example, I’m using the Simple HTML Invoice Template, and I statically typed in the invoice we’ll use. The html2pdf library allows you to embed it in your website and make parts of your site downloadable as PDFs, but today, we’ll focus on making a PDF in our application downloadable. 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. A 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.

Javascript download page as pdf