Issue with the content getting cut-off when generating the PDF using html2pdf.js

Question

I'm working on a project where I need to create a PDF version of a user-generated resume. The content of the resume is dynamic, including sections like experiences, education, and skills, which are added by the user.

However, I'm facing an issue where the content gets cut off at the end of a page. Part of the content that should be on one page spills over to the top of the next page. I'm not sure how to handle page breaks or content flow between pages in the PDF.

I've looked through various resources but haven't found a solution that addresses my specific problem.

Here's a simplified version of my code:

Parent Component:

import { useRef } from 'react'
import html2pdf from 'html2pdf.js';
import DownloadProfile from './components/DownloadProfile';

function App() {
  const pdfRef = useRef(null);

  const downloadPdf = () => {
    const options = {
      margin: 10,
      filename: 'myfile.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 1 },
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
    };

    // Generate PDF
    html2pdf().from(pdfRef.current).set(options).save();
  }
  return (
    <>
      <button onClick={downloadPdf}>download pdf</button>
      <DownloadProfile ref={pdfRef} profile={profile} />

    </>
  )
}

export default App


const profile = {
  name: "John Smith",
  country: "canada",
  address: "toronto, on",
  about: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pub",
  skills: [
    { id: 1, title: "Typescript" },
    { id: 2, title: "Typescript" },
    { id: 3, title: "Typescript" },
    { id: 4, title: "Typescript" },
    { id: 5, title: "Typescript" },
    { id: 6, title: "Typescript" },
    { id: 7, title: "Typescript" },
  ],
  experiences: [
    {
      company: "Lorem ipusm",
      position: "Lorem ipsum",
      description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop p",
    },
    {
      company: "Lorem ipusm",
      position: "Lorem ipsum",
      description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop p",
    },
    {

      company: "Lorem ipusm",
      position: "Lorem ipsum",
      description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop p",
    },
    {
      company: "Lorem ipusm",
      position: "Lorem ipsum",
      description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop p",
    },

  ],
  educations: [
    {
      university: "Lorem ipusm",
      degree: "Lorem ipsum",
      description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop p",
    },
    {
      university: "Lorem ipusm",
      degree: "Lorem ipsum",
      description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b een the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop pubeen the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop p",
    },
  ]
}

DownloadProfile Component:

import React, { forwardRef } from 'react';

const DownloadProfile = forwardRef(({ profile }, ref) => {
    const { name, about, educations, experiences, skills } = profile;
    return (
        <div ref={ref} >
            {/* Profile content rendering here */}
        </div>
    )
});

export default DownloadProfile

Problem:

The content in the PDF is getting cut off at the end of the page. The last line of one page is half shown on the top of the next page, disrupting the flow of the resume.

Can someone guide me on how to correctly handle the page breaks or content flow in PDF generation using html2pdf.js and jsPDF?

Any tips or solutions would be greatly appreciated.

Screenshot:

Answer 1

I wanted to share a solution I found for a common issue with jsPDF where text gets cut off at the end of a page when generating a PDF from HTML content. This can be particularly troublesome when dealing with dynamic or lengthy content.

After experimenting with various settings, I found a combination that works well to prevent text from splitting inappropriately across pages.

Here's the function I used to generate the PDF:

function downloadPdf() {
    let jsPdf = new jsPDF('p', 'pt', 'letter');
    var htmlElement = pdfRef.current; // Reference to the HTML content

    const opt = {
        callback: function (jsPdf) {
            jsPdf.save("Test.pdf");
        },
        margin: [20, 20, 20, 20], // Set appropriate margins
        autoPaging: 'text', // Crucial for handling text flow across pages
        html2canvas: {
            allowTaint: true,
            letterRendering: true,
            logging: false,
            scale: 0.4, // Adjust the scale to fit content
        }, 
    };

    jsPdf.html(htmlElement, opt);
}

Key Points:

• The autoPaging: 'text' option in jsPDF was particularly useful to ensure the text flows correctly from one page to another.

• Adjusting the scale in html2canvas options helped fit the content properly within the PDF pages.

This approach worked well for my use case with dynamic content. I hope this solution helps others who are struggling with similar issues in jsPDF. Feel free to tweak the settings to suit your specific needs!