Generate PDF of a component in React

How to generate PDF of a component in React

C reate your component in React and want to give a functionality to user to print a PDF or save as a PDF of that component. This article will help you to generate a pdf document of content of given component. This will give you a popup to print the compenent's data in PDF with given styles. let's get started.

Create a React component to print:

let's create a React component, later we will print this component as a PDF.
Resume.js:

                        import React, { Component } from "react";
                        
                        const value = {
                          basicDetails: {
                            firstName: "Shubham ",
                            lastName: "Verma",
                            jobTitle: "Software Engineer",
                            email: "test@test.com",
                            phoneNumber: "(91) 123-4567-890",
                            website: "https://idkblogs.com/",
                            location: "India"
                          },
                          careerProfile: {
                            profileDesc:
                              "Software Engineer with multiple tech stack"
                          },
                          skills: [
                            {
                              skillName: "HTML",
                              skillLevel: "5"
                            },
                            {
                              skillName: "CSS",
                              skillLevel: "5"
                            },
                            {
                              skillName: "JS",
                              skillLevel: "5"
                            }
                          ],
                          companyDetails: [
                            {
                              companyName: "IDKBLOGS",
                              designation: "Software Engineer",
                              empStartDate: "04/2010",
                              empEndDate: "02/2022",
                              employmentDetail:
                                "<p>Responsible for building websites and web based applications and to coordinate with team.</p>\n"
                            }
                          ],
                          education: [
                            {
                              qualification: "BE",
                              institution: "XYZ",
                              eduStartDate: "04/2016",
                              eduEndDate: "04/2020",
                              educationDetail: "<p>Specialization in Computer Science Engineering</p>\n"
                            },
                            {
                              qualification: "HSC",
                              institution: "ABC",
                              educationDetail: "<p>Higher Secondary Education</p>\n",
                              eduStartDate: "04/2014",
                              eduEndDate: "03/2016"
                            }
                          ]
                        };
                        
                        class Resume extends Component {
                          render() {
                            return (
                              <div className="bg-gray-200 p-6">
                                <div className="a4-screen-sized">
                                  <div className="aspect-ratio-box shadow-lg rounded-lg overflow-hidden">
                                    <div className="aspect-ratio-box-inside border border-gray-200 rounded-lg overflow-hidden">
                                      <div className="w-full object-cover object-center p-5 bg-gray-100">
                                        <h1 className="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3 uppercase">
                                          {value.basicDetails.firstName} {value.basicDetails.lastName}
                                        </h1>
                                        <p
                                          className="leading-relaxed mb-3"
                                          style={{ color: "rgb(255, 179, 62)" }}
                                        >
                                          {" "}
                                          {value.basicDetails.jobTitle}{" "}
                                        </p>
                                      </div>
                                      <div className="flex flex-wrap w-full p-5">
                                        <div className="w-2/3">
                                          <h2 className="text-md bold title-font text-gray-500 tracking-widest">
                                            Work
                                          </h2>
                                          {value.companyDetails.map((workItem, index) => (
                                            <div className="flex flex-wrap">
                                              <div className="w-1/2">
                                                <p className="leading-relaxed mb-4 text-md">
                                                  {" "}
                                                  {workItem.designation}
                                                </p>
                                                <p className="leading-relaxed mb-4 text-sm uppercase">
                                                  {" "}
                                                  {workItem.companyName}
                                                </p>
                                              </div>
                                              <div className="w-1/2">
                                                <p className="leading-relaxed mb-4 text-md">
                                                  {workItem.empStartDate} - {workItem.empEndDate}
                                                </p>
                                              </div>
                                              <div
                                                className="leading-relaxed mb-4 text-sm"
                                                dangerouslySetInnerHTML={{
                                                  __html: workItem.employmentDetail
                                                }}
                                              ></div>
                                            </div>
                                          ))}
                                          <h2 className="text-md bold title-font text-gray-500 tracking-widest">
                                            Education
                                          </h2>
                                          {value.education.map((workItem, index) => (
                                            <div className="flex flex-wrap">
                                              <div className="w-1/2">
                                                <p className="leading-relaxed mb-4 text-md">
                                                  {" "}
                                                  {workItem.qualification}
                                                </p>
                                                <p className="leading-relaxed mb-4 text-sm uppercase">
                                                  {" "}
                                                  {workItem.institution}
                                                </p>
                                              </div>
                                              <div className="w-1/2">
                                                <p className="leading-relaxed mb-4 text-md">
                                                  {workItem.eduStartDate} - {workItem.eduEndDate}
                                                </p>
                                              </div>
                                              <div
                                                className="leading-relaxed mb-4 text-sm"
                                                dangerouslySetInnerHTML={{
                                                  __html: workItem.educationDetail
                                                }}
                                              ></div>
                                            </div>
                                          ))}
                                        </div>
                                        <div className="w-1/3 px-5">
                                          <h2 className="text-md bold title-font text-gray-500 tracking-widest mb-4">
                                            Contact
                                          </h2>
                                          <p className="leading-relaxed mb-2 text-sm">
                                            {value.basicDetails.email}
                                          </p>
                                          <p className="leading-relaxed mb-2 text-sm">
                                            {value.basicDetails.phoneNumber}
                                          </p>
                                          <p className="leading-relaxed mb-2 text-sm">
                                            {value.basicDetails.website}
                                          </p>
                                          <p className="leading-relaxed mb-2 text-sm">
                                            {value.basicDetails.location}
                                          </p>
                                          <h2 className="text-md bold title-font text-gray-500 tracking-widest my-4">
                                            Profile
                                          </h2>
                                          <div
                                            className="leading-relaxed mb-2 text-sm"
                                            dangerouslySetInnerHTML={{
                                              __html: value.careerProfile.profileDesc
                                            }}
                                          ></div>
                                          <h2 className="text-md bold title-font text-gray-500 tracking-widest my-4">
                                            Skills
                                          </h2>
                                          {value.skills.map((skill, index) => (
                                            <p className="leading-relaxed mb-2 text-sm">
                                              {skill.skillName}
                                            </p>
                                          ))}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            );
                          }
                        }
                        
                        export default Resume;
                              

Output of this component:

Create a React component to print

Now create another component to print the above Resume component :

In this component, we will write our logic to generate a PDF of above component.
In this component, we'll have a button Print Resume to generate the pdf of Resume component. When you click on this button, this will show a poppup to print. You need to select as per your requirements.
App.js:

                                import ReactDOM from "react-dom";
                                import Resume from "../components/resume";
                                import React, { useRef } from "react";
                                import { useReactToPrint } from "react-to-print";
                                
                                const App = () => {
                                  const resumeCompRef = useRef();
                                  const handlePrintFn = useReactToPrint({
                                    content: () => resumeCompRef.current
                                  });
                                
                                  return (
                                    <div className="bg-gray-200 p-6">
                                      <button
                                        type="button"
                                        className="bg-gray-500 border border-gray-500 p-2 mb-4"
                                        onClick={handlePrintFn}
                                      >
                                        Print Resume
                                      </button>
                                      {/* <h1 ref={resumeCompRef}>HELLO?</h1> */}
                                      {<Resume ref={resumeCompRef} />}
                                    </div>
                                  );
                                };
                              

Here is the gif of this PDF generation process:

Create a React component to print

Here is the PDF that we generated earlier:

Dependencies:

We used a npm module name react-to-print. You need to install this dependency in your app by using following command:

npm install react-to-print

---

Conclusion:

In this article, we have created a Resume component and also created another component App. In App component, we wrote our logic to generate Resume component in PDF. Also we have downloaded this PDF into our system.