使用 jsPDF 和 React 实现内容超出页面自动分页-js教程-PHP中文网

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

碧海醫心

发布： 2025-10-26 10:07:21

原创

819人浏览过

使用 jspdf 和 react 实现内容超出页面自动分页

本文档旨在解决在使用 jsPDF 和 React.js 生成 PDF 文件时，内容超出页面范围导致重叠的问题。通过 `pdf.html()` 方法将 HTML/React 元素转换为 PDF 时，配置 `autoPaging` 选项可以实现自动分页，确保内容完整显示，避免页面内容重叠。

在使用 jsPDF 生成 PDF 文件时，特别是当内容来自 HTML 或 React 组件时，如何处理内容超出页面边界是一个常见的问题。pdf.html() 方法是一个方便的选择，但默认情况下，它不会自动分页，导致内容重叠。以下是如何配置 pdf.html() 方法以实现自动分页的详细步骤和注意事项。

配置 autoPaging 选项

pdf.html() 方法接受一个配置对象，其中包含各种选项，包括控制分页行为的 autoPaging 选项。将 autoPaging 设置为 'text' 或 true 可以启用自动分页功能。

await pdf.html(tempContainer, {
  callback: async(pdf) => {
  },
  margin: [10, 10, 10, 10], // top, left, bottom, right margins
  autoPaging: 'text', // Automatically add new pages if content overflows
  x: 0,
  y: 50,
  // width: 100,
  html2canvas: {
    scale: 0.5 // Adjusts the resolution of the output
  }
});

登录后复制

代码解释：

tempContainer: 这是包含要转换为 PDF 内容的 HTML 元素的容器。在你的例子中，它可能是在 React 组件中使用 renderToString 生成的 HTML 字符串。
callback: 一个异步回调函数，在 HTML 转换为 PDF 后执行。你可以使用它来进一步处理 PDF 文档。
margin: 设置页面的边距，顺序为上、左、下、右。
autoPaging: 设置为 'text' 启用自动分页。这意味着当内容超出页面底部时，jsPDF 会自动添加新页面。
x 和 y: 设置内容在页面上的起始位置。
html2canvas: 一个配置对象，用于控制 html2canvas 的行为。 scale 属性用于调整输出的分辨率。

完整示例

超会AI

AI驱动的爆款内容制造机

查看详情

以下是将上述配置集成到你的 React 组件中的示例代码：

import jsPDF from 'jspdf';
import { renderToString } from 'react-dom/server';
import ReportTemplate from './ReportTemplate'; // 你的报告模板组件

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

  // 创建一个临时容器来容纳 HTML 字符串
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = ComponentString;

  await pdf.html(tempContainer, {
    callback: async(pdf) => {
      pdf.save(fileName);
    },
    margin: [10, 10, 10, 10],
    autoPaging: 'text',
    x: 0,
    y: 50,
    html2canvas: {
      scale: 0.5
    }
  });
}

// 在你的 React 组件中使用 generatePdf 函数
const MyComponent = ({ printType, data }) => {
  const ComponentString = renderToString(
    <ReportTemplate
      title='Example Pdf file'
      type={printType}
      data={data}
    />
  );

  useEffect(() => {
      generatePdf({
        ComponentString,
        fileName: 'docs.pdf'
      });
    }
  }, [printType]);

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

export default MyComponent;

登录后复制

注意事项：

renderToString: 确保使用 renderToString 将 React 组件渲染为 HTML 字符串。
tempContainer: 创建一个临时 DOM 元素，并将 HTML 字符串插入其中。这是因为 pdf.html() 方法需要一个 DOM 元素作为输入。
html2canvas 缩放: html2canvas 的 scale 选项会影响 PDF 的清晰度。根据需要调整此值。较小的 scale 值会降低 PDF 的大小和清晰度，但可以提高渲染速度。
异步操作: 确保 pdf.html() 调用使用 await，因为它是异步操作。这可以防止在 HTML 转换完成之前保存 PDF。
CSS 样式: 某些 CSS 样式可能无法正确转换为 PDF。建议在 ReportTemplate 组件中包含适合打印的 CSS 样式。