Generate PDF in Background using HTML file in a Hidden iFrame in React App

Hello folks! I’ve got a requirement to generate PDFs in React app with following requirements. In this article we will see how we can generate a PDF document with following requirements.

• Use HTML file (a template file with JavaScript methods to fill data)
• Should not show the file in the UI

Photo by CURVD® on Unsplash

To Achieve the requirements, I used/planned the following things.

1. jsPDF to generate HTML content as PDF
2. Use of iFrame to load HTML file
3. A hidden iFrame of course to hide it from the user

Let’s go step by step to see how I achieved the result.

Assuming that you have a React App setup, so not adding the steps to create a React App here.

Step 1 — Add jsPDF to React App

jsPDF is a popular package to generate PDFs from text, image, HTML, and even React components.

To install follow the command

npm install jspdf

OR

yarn add jspdf

jsPDF Github | Documentation

Step 2 — Add HTML files to React App

The first thing that I thought of to add the HTML files to src/assets/templates folder and use it, but it did not work out for iFrame to load, instead I created a folder in public as public/templates and kept all the HTML templates there.

Step 3 — Add iFrame to our view(s) and make it hidden

In the component I have added an iFrame element and bound to the templateRef, also the source HTML file to load.

As you also see the style of the iFrame is also set to a width and height in millimetre, so that the output of the HTML would print in correct A4 size container. (A4 width and height are 210mm and 297mm respectively)

To hide the iframe from the user, we have couple of ways to do it, the following way shows using the visibility css property as hidden.

We could also make the container absolute and position it in a non-viewable area, like top to set as -1000px.

Step 4 — Generate PDF for A4/Letter paper size output

To generate the PDF, we need to Initialize the jsPDF with the following options.

We can choose from the options available for document orientation and format, please see the available options in the jspdf documentation.

The unit part is tricky, the unit with px and with hotfixes, it renders as we see pixel by pixel. There are other units too, please do check out other units whichever works for our requirement.

Then we call the method that is defined in the HTML file, to update the dynamic content. And then using doc.html we generate the PDF from HTML. The important part here is the iframe’s contentWindow.document.body. which holds the HTML for us.

Step 5 — What do we want to do with our generated PDF?

Now that our PDF is generated, there are few use cases after that.

1. Show it in browser tab, and let the user print/download it.

doc.html(html, {
  callback(doc) {
    const blobUrl = doc.output("bloburi", {
        filename: "output_document.pdf"
      });
      window.open(blobUrl, "_blank");
    },
    margin: [40, 20, 40, 20]
});

2. Save it directly in users’ local machine

doc.html(html, {
  callback(doc) {
    const blobUrl = doc.output("bloburi", {
      filename: "output_document.pdf"
    });
    window.open(blobUrl, "_blank");
  },
  margin: [40, 20, 40, 20]
});

3. Upload to Server/AWS S3

doc.html(html, {
  callback(doc) {
    const blob = doc.output("blob", {filename:"output_document.pdf"});
    const fileByteArray = doc.output("arraybuffer", {filename:"output_document.pdf"});
  },
  margin: [40, 20, 40, 20]
});

The following PDF is saved in local machine.

Generated PDF

Gotchas

Thats it, now that the requirements are achieved, here are few things we might want to have.

1. Custom Font for HTML template

There are few steps involved here, first we need to convert the required font file to base64 string and use it. And then use this font as base64 to add it to the jspdf and set the font and then add the font.

2. Fix the text is getting cutoff at the bottom/start of the page.

To fix this, we need add the autoPaging: “text”

Conclusion

In this article we learned how to generate a PDF file from HTML template which is hidden from the user, using jspdf. Hope you liked the article.

Here is the complete sample in Code Sandbox

That’s it folks, thank you for reading this article; hope it helps you solve the issue. Please follow me to get good articles like this when I publish them. See ya all. Give a clap, which will encourage me to write more articles. :)