<p align="center">
<img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
<p align="center">React renderer for creating PDF files on the browser and server<p>
<p align="center">
<a href="https://www.npmjs.com/package/@react-pdf/renderer">
<img src="https://img.shields.io/npm/v/@react-pdf/renderer.svg" />
</a>
<a href="https://travis-ci.org/diegomura/react-pdf">
<img src="https://img.shields.io/travis/diegomura/react-pdf.svg" />
</a>
<a href="https://github.com/diegomura/react-pdf/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/diegomura/react-pdf.svg" />
</a>
<a href="https://spectrum.chat/react-pdf">
<img src="https://withspectrum.github.io/badge/badge.svg" />
</a>
<a href="https://github.com/prettier/prettier">
<img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg" />
</a>
</p>
</p>
## 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 = () => (
<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
```jsx
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
```jsx
import React from 'react';
import ReactPDF from '@react-pdf/renderer';
ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);
```
## Examples
For each example, try opening `output.pdf` to see the result.
<table>
<tbody>
<tr>
<td align="center" valign="top">
<img width="150" height="150" src="https://github.com/diegomura/react-pdf/blob/master/examples/text/thumb.png">
<br>
<a href="https://github.com/diegomura/react-pdf/tree/master/examples/text/">Text</a>
</td>
<td align="center" valign="top">
<img width="150" height="150" src="https://github.com/diegomura/react-pdf/blob/master/examples/images/thumb.png">
<br>
<a href="https://github.com/diegomura/react-pdf/tree/master/examples/images/">Images</a>
</td>
<td align="center" valign="top">
<img width="150" height="150" src="https://github.com/diegomura/react-pdf/blob/master/examples/resume/thumb.png">
<br>
<a href="https://github.com/diegomura/react-pdf/tree/master/examples/resume/">Resume</a>
</td>
<td align="center" valign="top">
<img width="150" height="150" src="https://github.com/diegomura/react-pdf/blob/master/examples/fractals/thumb.png">
<br>
<a href="https://github.com/diegomura/react-pdf/tree/master/examples/fractals/">Fractals</a>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td align="center" valign="top">
<img width="150" height="150" src="https://github.com/diegomura/react-pdf/blob/master/examples/knobs/thumb.png">
<br>
<a href="https://github.com/diegomura/react-pdf/tree/master/examples/knobs/">Knobs</a>
</td>
<td align="center" valign="top">
<img width="150" height="150" src="https://github.com/diegomura/react-pdf/blob/master/examples/pageWrap/thumb.png">
<br>
<a href="https://github.com/diegomura/react-pdf/tree/master/examples/pageWrap/">Page wrap</a>
</td>
</tr>
</tbody>
</table>
To run the examples, first clone the project and install the dependencies:
```sh
git clone https://github.com/diegomura/react-pdf.git
cd react-pdf
yarn install
```
Then, run `yarn example -- <example-name>`
```sh
yarn example -- fractals
```
## Contributors
This project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md).
<a href="https://github.com/diegomura/react-pdf/graphs/contributors"><img src="https://opencollective.com/react-pdf/contributors.svg?width=890" /></a>
## Sponsors
Thank you to all our sponsors! [[Become a sponsors](https://opencollective.com/react-pdf#sponsors)]
<a href="https://opencollective.com/react-pdf#sponsors" target="_blank"><img src="https://opencollective.com/react-pdf/sponsors.svg?width=890"></a>
## Backers
Thank you to all our backers! [[Become a backer](https://opencollective.com/react-pdf#backer)]
<a href="https://opencollective.com/react-pdf#backers" target="_blank"><img src="https://opencollective.com/react-pdf/backers.svg?width=890"></a>
## License
MIT © [Diego Muracciole](http://github.com/diegomura)
---
![](https://img.shields.io/npm/dt/@react-pdf/renderer.svg?style=flat)
没有合适的资源?快使用搜索试试~ 我知道了~
react-reactpdf使用React创建PDF文件
共182个文件
js:117个
ttf:23个
md:11个
1星 需积分: 49 22 下载量 134 浏览量
2019-08-14
21:28:11
上传
评论
收藏 5.81MB ZIP 举报
温馨提示
一个PDF React渲染器,用于在浏览器,移动和服务器上创建PDF文件
资源推荐
资源详情
资源评论
收起资源包目录
react-reactpdf使用React创建PDF文件 (182个子文件)
.babelrc 263B
.eslintignore 33B
.eslintrc 4KB
.gitattributes 70B
.gitignore 50B
test.jpg 118KB
borders.js 18KB
layout.test.js 18KB
unitsConversion.test.js 18KB
objectFit.test.js 13KB
index.js 12KB
image.test.js 12KB
font.test.js 11KB
transform.test.js 10KB
node.test.js 8KB
styleShorthands.test.js 8KB
Node.js 7KB
Text.js 7KB
Base.js 6KB
transformStyles.js 5KB
document.test.js 5KB
text.test.js 5KB
image.js 5KB
Page.js 5KB
opacity.test.js 4KB
Image.js 4KB
Document.js 4KB
ruler.js 4KB
rollup.config.js 4KB
Experience.js 4KB
stylesInherit.test.js 4KB
base.test.js 4KB
canvas.test.js 3KB
index.js 3KB
dom.js 3KB
flexboxAttributes.test.js 3KB
emoji.js 3KB
debug.js 3KB
transform.js 3KB
background.test.js 3KB
objectFit.js 3KB
yogaValue.js 3KB
font.js 3KB
note.test.js 3KB
attributedString.js 3KB
dummyRoot.js 3KB
index.js 3KB
page.test.js 3KB
attributedString.test.js 3KB
domApi.test.js 3KB
stylesExpansion.test.js 2KB
mediaQueries.test.js 2KB
renderer.js 2KB
index.js 2KB
borders.test.js 2KB
index.js 2KB
index.js 2KB
pdf.test.js 2KB
pageSizes.js 2KB
index.js 2KB
clipping.js 2KB
index.js 2KB
node.js 2KB
elements.test.js 2KB
emoji.test.js 2KB
link.test.js 1KB
cache.test.js 1KB
pageSize.test.js 1KB
standardFont.js 1KB
view.test.js 1KB
url.test.js 1KB
jpeg.js 1KB
flattenStyles.test.js 1KB
index.js 1KB
Header.js 1KB
Canvas.js 1KB
matchPercent.test.js 1KB
Skills.js 1KB
propsEqual.test.js 1003B
index.js 990B
index.js 974B
transformOrigin.js 951B
transformUnits.js 943B
propsEqual.js 900B
nodeApi.test.js 852B
Note.js 841B
Fractal.js 829B
index.js 769B
painter.js 755B
boxModel.js 740B
jpeg.test.js 736B
png.test.js 727B
warning.js 688B
Education.js 667B
ignorableChars.js 663B
Root.js 662B
index.js 652B
index.js 636B
borders.js 635B
transformFontWeight.js 588B
共 182 条
- 1
- 2
资源评论
- C_SF_C2020-04-07就是官方原版例子
weixin_39840924
- 粉丝: 492
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功