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 позволяет создавать PDF-файлы с помощью React-компонентов; такие документы можно отрисовать либо в браузере, либо на сервере с Node.
Это рендерер или просмотрщик PDF?Это React-рендерер, который генерирует PDF из ваших компонентов; он не предназначен для показа уже существующих PDF. Для просмотра PDF есть отдельный пакет с похожим названием.
Как добавить это в проект?Установите пакет и создайте документ с помощью предоставленных React-компонентов, затем отрисуйте его в DOM в браузере или сохраните в файл в Node.
Нужно ли знать JSX и flexbox, чтобы этим пользоваться?Да: документы строятся из React/JSX-компонентов, а верстка выполняется через flexbox, который является одной из тем проекта.
Одинаково ли это работает в вебе и на сервере?Да, одни и те же React-компоненты можно отрисовать в DOM в браузере или сохранить в файл на сервере Node.js.
Проект активно поддерживается?В репозитории есть воркфлоу релизов и CI (main.yml, release.yml, site.yml) и монорепозиторий на базе lerna, что говорит о текущей активной разработке и выпусках.
Как устроен код?Это монорепозиторий на lerna/yarn workspaces: в нём есть пакеты основного рендерера и отдельное рабочее пространство 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