{"id":13401068,"url":"https://github.com/diegomura/react-pdf","last_synced_at":"2025-12-29T05:23:31.244Z","repository":{"id":37396563,"uuid":"71293321","full_name":"diegomura/react-pdf","owner":"diegomura","description":"📄  Create PDF files using React","archived":false,"fork":false,"pushed_at":"2025-03-21T17:38:26.000Z","size":35036,"stargazers_count":15605,"open_issues_count":411,"forks_count":1247,"subscribers_count":100,"default_branch":"master","last_synced_at":"2025-05-12T18:06:38.776Z","etag":null,"topics":["flexbox","pdf","react","renderer"],"latest_commit_sha":null,"homepage":"https://react-pdf.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/diegomura.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"diegomura","open_collective":"react-pdf"}},"created_at":"2016-10-18T21:33:58.000Z","updated_at":"2025-05-11T13:16:31.000Z","dependencies_parsed_at":"2023-11-30T18:08:43.422Z","dependency_job_id":"d61e9310-1cc9-426b-a850-ffdc906b71d4","html_url":"https://github.com/diegomura/react-pdf","commit_stats":{"total_commits":1011,"total_committers":140,"mean_commits":"7.2214285714285715","dds":"0.41444114737883286","last_synced_commit":"7b678cf809cf85f244b6afe0edb9e26c40f2964e"},"previous_names":[],"tags_count":752,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegomura%2Freact-pdf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegomura%2Freact-pdf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegomura%2Freact-pdf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegomura%2Freact-pdf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diegomura","download_url":"https://codeload.github.com/diegomura/react-pdf/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253804238,"owners_count":21967046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flexbox","pdf","react","renderer"],"created_at":"2024-07-30T19:00:58.364Z","updated_at":"2025-12-29T05:23:31.237Z","avatar_url":"https://github.com/diegomura.png","language":"TypeScript","funding_links":["https://github.com/sponsors/diegomura","https://opencollective.com/react-pdf"],"categories":["Others","Uncategorized","十二、React 渲染器（拓展 React 能力）","JavaScript","TypeScript","Preview","UI Components","JAVASCRIPT","*.js","PDF","File","Generators","React","Repository","🌐 Web Development - Frontend","React [🔝](#readme)","Libraries"],"sub_categories":["Uncategorized","3.  Immutable 工具（辅助状态管理）","`npm run build`","Viewer","React","Markdown","React Components","Office"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png\" height=\"280px\"\u003e\n  \u003cp align=\"center\"\u003eReact renderer for creating PDF files on the browser and server\u003cp\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@react-pdf/renderer\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/@react-pdf/renderer?style=flat\u0026colorA=000000\u0026colorB=000000\" /\u003e\n    \u003c/a\u003e\n     \u003ca href=\"https://opencollective.com/react-pdf\"\u003e\n      \u003cimg src=\"https://img.shields.io/opencollective/all/react-pdf?style=flat\u0026colorA=000000\u0026colorB=000000\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/diegomura/react-pdf/blob/master/LICENSE\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/license/diegomura/react-pdf?style=flat\u0026colorA=000000\u0026colorB=000000\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://blockchain.com/btc/address/bc1qj223udztpmt5dck46dw0yap08yum63ht56h90v\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/BTC-f5f5f5?style=flat\u0026colorA=000000\u0026colorB=000000\" /\u003e\n    \u003c/a\u003e\n     \u003ca href=\"https://blockchain.com/eth/address/0x4e1DB76bA0858BbCAa4DD804418D0D9EcF77B1cC\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/ETH-f5f5f5?style=flat\u0026colorA=000000\u0026colorB=000000\" /\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n## Lost?\n\nThis 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).\n\n## How to install\n\n```sh\nyarn add @react-pdf/renderer\n```\n\n## How it works\n\n```jsx\nimport React from 'react';\nimport { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';\n\n// Create styles\nconst styles = StyleSheet.create({\n  page: {\n    flexDirection: 'row',\n    backgroundColor: '#E4E4E4',\n  },\n  section: {\n    margin: 10,\n    padding: 10,\n    flexGrow: 1,\n  },\n});\n\n// Create Document Component\nconst MyDocument = () =\u003e (\n  \u003cDocument\u003e\n    \u003cPage size=\"A4\" style={styles.page}\u003e\n      \u003cView style={styles.section}\u003e\n        \u003cText\u003eSection #1\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003cView style={styles.section}\u003e\n        \u003cText\u003eSection #2\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/Page\u003e\n  \u003c/Document\u003e\n);\n```\n\n### `Web.` Render in DOM\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { PDFViewer } from '@react-pdf/renderer';\n\nconst App = () =\u003e (\n  \u003cPDFViewer\u003e\n    \u003cMyDocument /\u003e\n  \u003c/PDFViewer\u003e\n);\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n### `Node.` Save in a file\n\n```jsx\nimport React from 'react';\nimport ReactPDF from '@react-pdf/renderer';\n\nReactPDF.render(\u003cMyDocument /\u003e, `${__dirname}/example.pdf`);\n```\n\n## Contributors\n\nThis 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.\n\n\u003ca href=\"https://github.com/diegomura/react-pdf/blob/master/.github/CONTRIBUTING.md\"\u003e\u003cimg src=\"https://opencollective.com/react-pdf/contributors.svg?width=890\" /\u003e\u003c/a\u003e\n\n## Sponsors\n\nThank you to all our sponsors! [[Become a sponsors](https://opencollective.com/react-pdf#sponsors)]\n\n\u003ca href=\"https://opencollective.com/react-pdf#sponsors\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-pdf/sponsors.svg?width=890\"\u003e\u003c/a\u003e\n\n## Backers\n\nThank you to all our backers! [[Become a backer](https://opencollective.com/react-pdf#backer)]\n\n\u003ca href=\"https://opencollective.com/react-pdf#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-pdf/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n## License\n\nMIT © [Diego Muracciole](http://github.com/diegomura)\n\n---\n\n[![](https://img.shields.io/npm/dt/@react-pdf/renderer.svg?style=flat)](https://www.npmjs.com/package/@react-pdf/renderer)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegomura%2Freact-pdf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiegomura%2Freact-pdf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegomura%2Freact-pdf/lists"}