标题：使用 html2pdf.js 生成 PDF 时内容被截断的问题

Question

我正在开展一个项目，需要创建用户生成的简历的 PDF 版本。简历的内容是动态的，包括用户添加的经验、教育和技能等部分。

但是，我面临着内容在页面末尾被切断的问题。本应位于一页上的部分内容溢出到下一页的顶部。我不确定如何处理 PDF 中页面之间的分页符或内容流。

我查看了各种资源，但尚未找到解决我的特定问题的解决方案。

这是我的代码的简化版本：

父组件：

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",
    },
  ]
}

下载配置文件组件：

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

问题： PDF 中的内容在页面末尾被截断。一页的最后一行一半显示在下一页的顶部，扰乱了简历的流程。

有人可以指导我如何使用 html2pdf.js 和 jsPDF 正确处理 PDF 生成中的分页符或内容流吗？任何提示或解决方案将不胜感激。

截图：

Answer 1

我想分享一个针对 jsPDF 常见问题的解决方案，即从 HTML 内容生成 PDF 时文本在页面末尾被截断。在处理动态或冗长的内容时，这可能会特别麻烦。

在尝试了各种设置后，我发现了一种可以很好地防止文本跨页面拆分的组合。

这是我用来生成 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);
}

要点：

• jsPDF 中的 autoPaging: 'text' 选项对于确保文本从一页正确地流到另一页特别有用。

• 调整 html2canvas 选项中的比例有助于使内容正确适合 PDF 页面。

这种方法非常适合我的动态内容用例。我希望这个解决方案可以帮助其他在 jsPDF 中遇到类似问题的人。请随意调整设置以满足您的特定需求！