React-pdf

react-pdf

製品情報

お気に入り

プログラミング言語

公開チャット

サポートプラン

現在利用可能なOSSプランはありません

リポジトリのプロバイダーまたは寄稿者である場合は、OSSプランの追加を開始できます。

OSSプランを追加する
Learn more here

このOSSプランをお探しの場合は、お問い合わせください

製品詳細

Create PDF files using React

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](https://github.com/wojtekmaj/react-pdf). ## How to install ```sh yarn add @react-pdf/renderer ``` ## How it works ```jsx 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 = () => ( Section #1 Section #2 ); ``` ### `Web.` Render in DOM ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import { PDFViewer } from '@react-pdf/renderer'; const App = () => ( ); ReactDOM.render(, document.getElementById('root')); ``` ### `Node.` Save in a file ```jsx import React from 'react'; import ReactPDF from '@react-pdf/renderer'; ReactPDF.render(, `${__dirname}/example.pdf`); ``` ## Contributors This project exists thanks to all the people who contribute. Looking to contribute? Please check our [[contribute]](https://github.com/diegomura/react-pdf/blob/master/.github/CONTRIBUTING.md) document for more details about how to setup a development environment and submitting code. ## Sponsors Thank you to all our sponsors! [[Become a sponsors](https://opencollective.com/react-pdf#sponsors)] ## Backers Thank you to all our backers! [[Become a backer](https://opencollective.com/react-pdf#backer)] ## License MIT © [Diego Muracciole](http://github.com/diegomura) --- ![](https://img.shields.io/npm/dt/@react-pdf/renderer.svg?style=flat)

Stay in touch

  • ビジネスおよび開発者向けの実用的な最新情報をご希望ですか?
  • ソースコードプロジェクトに対するPieceXコミュニティのニーズについてご提供します。
  • PieceXの最新の無料コミュニティコードプロジェクトをいち早くお知らせします。
PieceX Logo