React-Print-PDF 项目快速上手指南

黎情卉Desired

于 2025-06-24 09:32:00 发布

阅读量974

点赞数 8

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00083/article/details/148864127

React-Print-PDF 项目快速上手指南

react-print-pdf Build and generate PDF using React 📄 UI kit for PDFs and print documents. Simple, reusable components and templates to create great invoices, docs, brochures. Use your favorite front-end framework React to build your next PDF. 项目地址: https://gitcode.com/gh_mirrors/re/react-print-pdf

前言

React-Print-PDF 是一个基于 React 的 PDF 文档生成解决方案，它允许开发者使用熟悉的 React 语法来创建复杂的 PDF 文档。本文将详细介绍如何从零开始搭建一个 React-Print-PDF 项目环境。

快速搭建方案

对于希望立即开始体验的开发人员，推荐使用预配置的开发环境模板。这个模板已经包含了所有必要的依赖项和基础配置，可以让你在几分钟内启动并运行项目。

快速搭建步骤

获取开发环境模板
按照模板中的说明文档进行初始化
将编辑器分为两个窗口：一个用于代码编辑，另一个用于实时预览 PDF 效果

这种方式特别适合快速原型开发或学习项目使用。

手动配置方案

如果你希望从零开始搭建项目，或者需要更灵活的项目结构，可以按照以下步骤进行手动配置。

1. 创建项目目录

首先创建一个新的项目文件夹并初始化 npm 项目：

mkdir react-print-starter
cd react-print-starter
npm init -y

这个命令会创建一个新的项目目录并生成默认的 package.json 文件。

2. 安装依赖

React-Print-PDF 提供了多种安装方式，可以根据你的包管理器选择适合的命令：

# npm 用户
npm install @fileforge/react-print

# yarn 用户
yarn add @fileforge/react-print

# pnpm 用户
pnpm add @fileforge/react-print

安装完成后，所有必要的依赖项都会被添加到你的项目中。

3. 创建第一个 PDF 组件

在项目中创建一个 documents 文件夹，然后在该文件夹下创建 index.jsx 文件：

import { PageTop, PageBottom, PageBreak } from "@fileforge/react-print";
import * as React from "react";

export const Document = ({ props }) => {
  return (
    <div>
      <PageTop>
        <span>Hello #1</span>
      </PageTop>
      <div>Hello #2</div>
      <PageBottom>
        <div className="text-gray-400 text-sm">Hello #3</div>
      </PageBottom>
      <PageBreak />
      <span>Hello #4, but on a new page ! </span>
    </div>
  );
};

这个示例展示了 React-Print-PDF 的几个核心组件：

PageTop: 定义页面顶部区域内容
PageBottom: 定义页面底部区域内容
PageBreak: 强制分页符

4. 编译文档为 HTML

在项目根目录创建 main.jsx 文件，用于编译你的文档：

import { compile } from "@fileforge/react-print";
import { Document } from "./document";

const html = await compile(<Document />);

console.log(html);

compile 函数会将你的 React 组件转换为可用于 PDF 生成的 HTML 结构。