react-pdf README

The project's README from github.com/diegomura/react-pdf. As one markdown file: README.md.

React renderer for creating PDF files on the browser and server

Lost?

This package is used to create PDFs using React. If you wish to display existing PDFs, you may be looking for react-pdf.

How to install

yarn add @react-pdf/renderer

How it works

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

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

// Create Document Component
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>
);

Web. Render in DOM

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. Save in a file

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

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

Contributors

This project exists thanks to all the people who contribute. Looking to contribute? Please check our [contribute] document for more details about how to setup a development environment and submitting code.

Sponsors

Thank you to all our sponsors! [Become a sponsors]

Backers

Thank you to all our backers! [Become a backer]

License

MIT © Diego Muracciole

react-pdf (diegomura/react-pdf)

Searching Database…

16.8K ·GitHub
React-pdf
这是什么？react-pdf 让你可以用 React 组件创建 PDF 文件，既可以在浏览器中渲染，也可以在服务器上通过 Node 渲染。
这是渲染器还是 PDF 查看器？它是一个 React 渲染器，可以根据你的组件生成 PDF，并不用于显示已有的 PDF。如果需要查看 PDF，有一个名字相似的独立包。
我该怎么把它添加到项目中？安装该包，然后使用提供的 React 组件构建文档，再在浏览器中渲染到 DOM，或在 Node 中保存为文件。
使用它需要了解 JSX 和 flexbox 布局吗？需要。文档是用 React/JSX 组件构建的，布局则通过 flexbox 处理，而 flexbox 也是该项目涵盖的主题之一。
在网页端和服务器端的效果一样吗？是的，同一套 React 组件既可以在浏览器中渲染到 DOM，也可以在 Node.js 服务器环境中保存为文件。
这个项目还在积极维护吗？项目包含发布和 CI 工作流（main.yml、release.yml、site.yml），并使用由 lerna 管理的 monorepo，表明项目仍在持续开发和发布。
代码库是怎么组织的？它是一个使用 lerna/yarn workspaces 构建的 monorepo，包含核心渲染器的包，以及一个用于本地开发的独立 examples 工作区。
使用这个许可证需要花钱吗？它采用 MIT 许可证发布，因此可以免费使用、修改和分发，包括用于商业项目。
它支持开发/实时预览模式吗？仓库中包含一个 dev 脚本，用于运行 examples 工作区，表明它在开发过程中支持实时预览，便于构建和测试 PDF 布局。
What are similar projects?pdfkit, ReLaXed, pdfcn, bentopdf, pdfmake, react-pdf, sghtmltopdf, liteparse
Which topics is it in?renderer, flexbox, pdf-generation, document, document-processing, pdf, react, npm, frontend, server, nodejs, library
Creator
diegomura
Size
47.4 MB
Stars
16.8K
Updated
CommitSep 22Release@react-pdf/[email protected]Aug 27
Age
9y
Commits · 90 Days