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

使用 jsPDF 在 React 中实现内容超长自动分页

花韻仙語

发布： 2025-10-26 10:12:01

原创

845人浏览过

使用 jspdf 在 react 中实现内容超长自动分页

本文介绍如何在 React 项目中使用 jsPDF 库，将 HTML 内容转换为 PDF 文件，并解决内容超出页面范围时自动分页的问题。我们将详细讲解如何配置 jsPDF，以及如何使用 `autoPaging` 选项来实现自动分页功能，确保生成的 PDF 文件内容完整且排版美观。

在使用 jsPDF 生成 PDF 文件时，如果内容超过单页的范围，默认情况下会导致内容溢出或被截断。为了解决这个问题，jsPDF 提供了 autoPaging 选项，可以自动将内容分页显示。本文将详细介绍如何在 React 项目中配置和使用 autoPaging 选项。

1. 安装 jsPDF

首先，需要在你的 React 项目中安装 jsPDF 库。可以使用 npm 或 yarn 进行安装：

npm install jspdf
# 或者
yarn add jspdf

登录后复制

2. 引入 jsPDF

在需要使用 jsPDF 的组件中引入该库：

import jsPDF from 'jspdf';

登录后复制

3. 生成 PDF 的基本代码

以下是一个生成 PDF 的基本示例，它接受一个包含 HTML 字符串的参数，并将其转换为 PDF 文件：

import jsPDF from 'jspdf';

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

  pdf.html(ComponentString, {
    callback(doc) {
      doc.save(fileName);
    } 
  });
}

登录后复制

4. 使用 autoPaging 选项实现自动分页

为了实现自动分页，我们需要在 pdf.html() 方法中添加 autoPaging 选项。autoPaging 可以设置为 'text'，表示根据文本内容自动分页。

Supercreator

AI视频创作编辑器，几分钟内从构思到创作。

查看详情

import jsPDF from 'jspdf';

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

  pdf.html(ComponentString, {
    callback(doc) {
      doc.save(fileName);
    },
    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
    }
  });
}

登录后复制

代码解释：

margin: 设置页面的边距，顺序为上、左、下、右。
autoPaging: 'text': 启用自动分页功能，根据文本内容进行分页。
x 和 y: 设置内容在页面上的起始位置。
html2canvas: 一个配置对象，用于控制 html2canvas 库的行为，它负责将 HTML 转换为 canvas 图像。
- scale: 调整输出的分辨率。

5. 在 React 组件中使用

以下是如何在 React 组件中使用上述 generatePdf 函数的示例：

import React, { useEffect } from 'react';
import { renderToString } from 'react-dom/server';
import { generatePdf } from './pdfGenerator'; // 假设 pdfGenerator.js 文件包含 generatePdf 函数
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

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

export default MyComponent;

登录后复制

注意事项：

确保 ReportTemplate 组件正确渲染并返回有效的 HTML 结构。
renderToString 方法用于将 React 组件渲染为 HTML 字符串。
useEffect 钩子用于在组件挂载后执行生成 PDF 的操作。
将 printType 和 data 添加到 useEffect 的依赖项数组中，确保在 printType 或 data 发生变化时重新生成 PDF。

6. 完整示例

以下是一个更完整的示例，包括 ReportTemplate 组件的简化版本：

// ReportTemplate.js
import React from 'react';

const ReportTemplate = ({ title, type, data }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>Type: {type}</p>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default ReportTemplate;

// MyComponent.js
import React, { useEffect, useState } from 'react';
import { renderToString } from 'react-dom/server';
import { generatePdf } from './pdfGenerator';
import ReportTemplate from './ReportTemplate';

const MyComponent = () => {
  const [printType, setPrintType] = useState('default');
  const [data, setData] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10', 'Item 11', 'Item 12', 'Item 13', 'Item 14', 'Item 15', 'Item 16', 'Item 17', 'Item 18', 'Item 19', 'Item 20']); // 模拟大量数据

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

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

  return (
    <div>
      <button onClick={() => setPrintType('newType')}>Change Type</button>
      {/* 你的组件内容 */}
    </div>
  );
};

export default MyComponent;

// pdfGenerator.js
import jsPDF from 'jspdf';

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

  pdf.html(ComponentString, {
    callback(doc) {
      doc.save(fileName);
    },
    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
    }
  });
};

登录后复制

7. 总结

通过使用 jsPDF 的 autoPaging 选项，可以轻松实现 HTML 内容的自动分页，从而生成内容完整且排版美观的 PDF 文件。在实际项目中，可以根据需要调整边距、起始位置和分辨率等参数，以达到最佳的显示效果。此外，请注意处理 html2canvas 的兼容性问题，确保在不同的浏览器和设备上都能正常工作。如果遇到复杂的布局问题，可以考虑使用 jsPDF 的底层 API 手动绘制内容，以获得更精细的控制。

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