使用 jsPDF 和 React.js 实现内容超出页面自动分页

本文旨在解决在使用 jsPDF 和 React.js 生成 PDF 文档时，内容超出页面高度导致重叠的问题。通过 `pdf.html()` 方法将 HTML/React 元素转换为 PDF，并配置 `autoPaging` 选项，实现内容自动分页，确保文档内容完整且排版美观。

在使用 jsPDF 和 React.js 构建 PDF 文档时，经常会遇到内容超出页面边界的情况，导致内容重叠，影响文档的可读性。jsPDF 提供了 autoPaging 选项，可以方便地实现内容超出页面时自动分页的功能。本文将详细介绍如何利用该选项，结合 pdf.html() 方法，在 React.js 项目中生成具有自动分页功能的 PDF 文档。

实现自动分页的关键：autoPaging 选项

pdf.html() 函数可以将 HTML 元素渲染到 PDF 文档中。要实现自动分页，需要在 pdf.html() 的配置对象中设置 autoPaging 选项。autoPaging 可以设置为 'text' 或 true。

• 'text'：根据文本内容自动分页。
• true：根据元素的高度自动分页。

以下代码展示了如何使用 autoPaging 选项：

import jsPDF from 'jspdf';

export const generatePdf = async ({ ComponentString, fileName }) => {
  const pdf = new jsPDF({
    format: "a4",
    unit: "px"
  });

  // 创建一个临时容器，将 ComponentString 渲染到其中
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = ComponentString;
  document.body.appendChild(tempContainer);

  await pdf.html(tempContainer, {
    callback: (pdf) => {
      pdf.save(fileName);
      // 移除临时容器
      document.body.removeChild(tempContainer);
    },
    margin: [10, 10, 10, 10], // top, left, bottom, right margins
    autoPaging: 'text', // Automatically add new pages if content overflows
    x: 0,
    y: 50,
    html2canvas: {
      scale: 0.5 // Adjusts the resolution of the output
    }
  });
}

代码解释：

超会AI

AI驱动的爆款内容制造机

90

查看详情

1. 创建 jsPDF 实例: 使用 new jsPDF() 创建一个新的 jsPDF 实例，并设置页面格式为 A4，单位为像素。
2. 创建临时容器: 为了能够将 React 组件渲染成 HTML 字符串并传递给 pdf.html()，需要创建一个临时的 div 元素，并将组件的 HTML 字符串插入到该容器中。
3. 配置 pdf.html(): 调用 pdf.html() 方法将 HTML 渲染到 PDF 文档中。
   • callback: 回调函数在 HTML 渲染完成后执行，用于保存 PDF 文件。
   • margin: 设置页边距，顺序为上、左、下、右。
   • autoPaging: 设置为 'text' 开启自动分页功能。
   • x 和 y: 设置内容起始的 x 和 y 坐标。
   • html2canvas: 配置 html2canvas 选项，例如设置 scale 调整输出分辨率。
4. 移除临时容器: 在 PDF 生成后，移除临时创建的 div 元素，避免页面污染。

在 React 组件中使用 generatePdf 函数

以下是一个使用 generatePdf 函数的 React 组件示例：

import React, { useEffect } from 'react';
import { renderToString } from 'react-dom/server';
import { generatePdf } from './pdfGenerator'; // 假设 generatePdf 函数在 pdfGenerator.js 文件中
import ReportTemplate from './ReportTemplate'; // 假设 ReportTemplate 是你的报告模板组件

const MyComponent = ({ printType, data }) => {
  const ComponentString = renderToString(
    <ReportTemplate
      title='Example Pdf file'
      type={printType}
      data={data}
    />
  );

  useEffect(() => {
    generatePdf({
      ComponentString,
      fileName: 'docs.pdf'
    });
  }, [printType, data]); // 依赖项包含 data，确保 data 变化时重新生成 PDF

  return (
    <div>
      {/* 你的组件内容 */}
    </div>
  );
};

export default MyComponent;

代码解释：

1. 引入必要的模块: 引入 React, useEffect, renderToString 以及自定义的 generatePdf 和 ReportTemplate 组件。
2. 使用 renderToString 渲染 React 组件: 使用 renderToString 将 ReportTemplate 组件渲染成 HTML 字符串。
3. 使用 useEffect 触发 PDF 生成: 使用 useEffect Hook 在组件挂载后或依赖项 printType 或 data 改变时触发 generatePdf 函数，生成 PDF 文档。

注意事项

• 确保已安装 jsPDF 和 html2canvas 依赖：npm install jspdf html2canvas
• html2canvas 用于将 HTML 转换为 canvas，jsPDF 基于 canvas 生成 PDF。
• 根据实际情况调整 margin、x、y 和 html2canvas 的 scale 选项，以获得最佳的排版效果。
• 在处理大量数据时，可能需要优化 HTML 结构和样式，以提高渲染性能。
• 如果内容包含复杂的 CSS 样式，可能需要使用 polyfill 或其他方法来确保在 html2canvas 中正确渲染。

总结

通过配置 pdf.html() 的 autoPaging 选项，可以轻松实现 jsPDF 的自动分页功能，避免内容超出页面边界的问题。结合 React.js 的组件化开发模式，可以高效地生成具有复杂布局和内容的 PDF 文档。希望本文能够帮助你解决在使用 jsPDF 和 React.js 生成 PDF 文档时遇到的分页问题。

以上就是使用 jsPDF 和 React.js 实现内容超出页面自动分页的详细内容，更多请关注php中文网其它相关文章！