Download pdf in webpage html

A very common use case today is that of giving your users the ability to download data from your website as a PDF. For example, invoices, concert tickets, and flight tickets tend to be available as PDF downloads. In this post, we’ll take a look at two solutions for easily converting HTML to PDF: html2pdf and Puppeteer.

html2pdf

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. For our example, I’m using the Simple HTML invoice template, and I statically typed in the invoice we’ll use. However, you can easily generate the HTML for your own invoice in your backend if you prefer.

I downloaded the bundled html2pdf JavaScript library directly and imported it in our site. You can download it from the GitHub repository, or if you already have a bundler in your site, you can install it via or .

To begin, we first define a function that will get the element we’ve rendered the invoice in and then call with that element to download it directly on our users’ client. Then we will call this function in a download button:

In the example above, we only rendered the Our Invoice header, but the end result is shown below.

Advantages and Disadvantages

The biggest advantage of html2pdf is that it’s really easy to generate a PDF from your HTML on your client, which means you don’t need a server at all. However, the disadvantage of this approach is that html2pdf just takes a screenshot of your site and generates a PDF out of it, which means the text will look blurry when you zoom in or if you’re using a Retina display.

You can configure html2pdf to use PNGs instead of JPEGs, but this causes the size of the PDF to increase dramatically: For the same resolution where the JPEG version is just KB, the PNG version is 28 MB.

To counter this, I’d recommend choosing a larger resolution to make your PDF look sharper. To do this, change the function and add the parameters for the scale to it:

Puppeteer

Puppeteer is a Node library that gives you an API to control a headless Chrome or Chromium instance. 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. The difference between Puppeteer and html2pdf is that you need to run Puppeteer on your server and serve the PDF to your users.

For the Puppeteer example, let’s build a small www.cronistalascolonias.com.ar server and serve our user a PDF that gets downloaded.

Let’s begin by creating a new Node project:

After initializing the Node project, we should have a in our directory. Now it’s time to add Puppeteer as a dependency to our project:

Your should look similar to this:

For our example, we’ll assume you have your page with the invoice running on .

We’ll now create an file where we will require Puppeteer, launch a new browser session, go to our invoice page, and save the PDF file:

When we now run the script via , we’ll see a nicely generated PDF with the name in our directory.

However, what we actually want is to serve our users a PDF when they click a download button. For this, we’ll use the module from Node and respond with the invoice PDF when a user goes to our page on .

First, we need to require in our script. We’ll start a small server and set the headers to to tell the browser that we will respond with a PDF. Instead of writing to a file when creating the PDF, we will directly serve the buffer that’s returned from . To make this possible, we just have to remove the option:

However, sometimes we won’t want to serve a page from our web server and we’ll instead want to use the HTML we generated on our server directly. This can easily be done with Puppeteer’s function, which takes the HTML that needs to get rendered on the site as an argument:

Advantages and Disadvantages

The biggest advantage of Puppeteer is that it creates an actual PDF file with text content instead of just using an image. You’ll be able to select and copy the text from the PDF, and you don’t need to worry about resolution since it will be always sharp. Additionally, the file size is significantly lower; compared to the html2pdf example, Puppeteer’s resulting PDF is about four times smaller.

The main disadvantage of using Puppeteer is that you’ll need to run a server instead of generating the PDF on the client.

Conclusion

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. However, considering the increased file size and resulting image creation, I’d recommend you build a component on your server with Puppeteer so that you can serve nice PDFs. In turn, your users will appreciate the small file size and sharp resolution.