【亲测免费】 React-PDF 技术文档

项目介绍

React-PDF 是一个用于在浏览器和服务器端创建 PDF 文件的 React 渲染器。它允许开发者使用 React 组件来生成 PDF 文件，提供了丰富的 API 和样式支持，使得创建复杂的 PDF 文档变得简单。

安装指南

安装方式

使用 yarn 或 npm 安装 @react-pdf/renderer 包：

yarn add @react-pdf/renderer

或者

npm install @react-pdf/renderer

项目使用说明

基本使用

1. 创建样式：使用 StyleSheet.create 方法创建样式对象。

import { StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

2. 创建文档组件：使用 Document 和 Page 组件来定义 PDF 文档的结构。

import React from 'react';
import { Document, Page, Text, View } from '@react-pdf/renderer';

const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

在浏览器中渲染

使用 PDFViewer 组件在浏览器中渲染 PDF 文档：

import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

ReactDOM.render(<App />, document.getElementById('root'));

在 Node.js 中保存为文件

在 Node.js 环境中，可以将 PDF 文档保存为文件：

import React from 'react';
import ReactPDF from '@react-pdf/renderer';

ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

项目 API 使用文档

主要组件

• Document：定义 PDF 文档的根组件。
• Page：定义 PDF 文档的页面。
• Text：用于在 PDF 中显示文本。
• View：用于创建布局容器。

样式 API

使用 StyleSheet.create 方法创建样式对象，支持的样式属性包括：

• flexDirection
• backgroundColor
• margin
• padding
• flexGrow

渲染 API

• PDFViewer：在浏览器中渲染 PDF 文档。
• renderToFile：在 Node.js 中将 PDF 文档保存为文件。

贡献者

感谢所有为该项目做出贡献的开发者。如果您想贡献代码，请查看 贡献指南。

赞助商

感谢所有赞助商的支持！如果您想成为赞助商，请访问 赞助页面。

许可证

本项目基于 MIT 许可证发布。详细信息请查看 LICENSE 文件。

---