How to generate PDF from DOM elements in React

So sometimes we needed to generate PDF in React but we are not sure which method will be the best. There is tons of complex things with the pdf like quality, size, there ratio and standard pdf size generation. In this article we will gonna learn how to generate PDF from DOM elements in React.

Requirements

Before actually writing the code for pdf generation we gonna need 2 packages. The first package will be dom-to-image. Which is basically gonna generate the image of our dom element. The second package we will gonna need is jspdf. Which basically gonna take that image as input and gonna generate pdf as output.

Generating PDF

To generate the pdf first of all we gonna need few elements in our dom which we want in the pdf.

<div className="parent-container">
<div>Data for the PDF </div>
</div>

Now we want to convert our div with className parent-container into an pdf. For that we will gonna write a function which we can trigger on onClick of any element.

We will gonna call our function generatePDF.

const generatePDF = () => {    }

To actually generate the pdf we also need to install those two packages.

npm install --save  dom-to-image jspdf

After that we will gonna get the reference of our element.

const generatePDF = () => { 
const ele = document.querySelector('.parent-container');
   }

After that we need to convert our div into an image.

import jsPDF from 'jspdf';
import domtoimage from 'dom-to-image';


const generatePDF = () => { 
const ele = document.querySelector('.parent-container');

 domtoimage.toPng(ele)
          .then((dataUrl) => {
           
          })
          .catch((error) => {
            console.error('oops, something went wrong!', error);
          });
   }

You can see we have passed our element to domtoimage.toPng and it returns dataUrl.

Now we can generate our pdf on image load.

import jsPDF from 'jspdf';
import domtoimage from 'dom-to-image';


const generatePDF = () => { 
const ele = document.querySelector('.parent-container');

 domtoimage.toPng(ele)
          .then((dataUrl) => {
            const img = new Image();
            img.onload = function () {
           
            };
            img.src = dataUrl;
          })
          .catch((error) => {
            console.error('oops, something went wrong!', error);
          });
   }

We have added one image and assigned src and onload function.

In the onload function we can generate our pdf.

import jsPDF from 'jspdf';
import domtoimage from 'dom-to-image';


const generatePDF = () => { 
const ele = document.querySelector('.parent-container');

 domtoimage.toPng(ele)
          .then((dataUrl) => {
            const img = new Image();
            img.onload = function () {
           // eslint-disable-next-line new-cap
              const pdf = new jsPDF('p', 'pt', [this.width, this.height]);
              const pdfWidth = pdf.internal.pageSize.getWidth();
              const pdfHeight = pdf.internal.pageSize.getHeight();
              pdf.addImage(dataUrl, 'PNG', 0, 0, pdfWidth, pdfHeight);
              pdf.save("blogreact.pdf");
            };
            img.src = dataUrl;
          })
          .catch((error) => {
            console.error('oops, something went wrong!', error);
          });
   }

Now what we have done is we created new instance of pdf. Added the size and image to that pdf and saved it using save function.

I hope you have learned something new today. Feel free to write your valuable comments.

How to convert your elements into svg using React

Categories: Reactjs

2 Comments

VIKAS - · September 12, 2020 at 5:09 am

good

Why Tailwind CSS is mind blowing - Blog React · September 14, 2020 at 3:54 am

[…] How to generate PDF from DOM elements in React […]

Comments are closed.