react-print-pdf
react-pdf
react-print-pdf | react-pdf | |
---|---|---|
9 | 50 | |
1,948 | 14,166 | |
7.3% | - | |
9.7 | 9.0 | |
6 days ago | 2 days ago | |
TypeScript | JavaScript | |
Apache License 2.0 | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react-print-pdf
-
HTML to PDF renderers: A simple comparison
For this comparison we decided to use a simple example of HTML document with some specific CSS styles (fonts, margins, etc.) and a header and footer. We used the react-print-pdf library to design the HTML document using React components. Especially, we re-used the advanced invoice with QR code template from the reac-print-pdf library. We then converted this HTML document to PDF using each of the four libraries and compared both the process required to generate the PDF and the quality of the output. We run the experiment on a MacBook Pro with Apple M1 Pro chip, 32 GB of RAM, using Node.js v20.11.0. We used chromium as the browser for Puppeteer and Playwright.
-
Create PDFs with Tailwind
The open-source library react-print-pdf brings a set of components and wrappers we can use to build beautiful PDFs in minutes.
-
Launch HN: Onedoc (YC W24) â A better way to create PDFs
Hey HN, weâre the co-founders of Onedoc (https://www.onedoclabs.com/), and the original contributors to the open-source library react-print-pdf (https://github.com/OnedocLabs/react-print-pdf) which lets developers design and generate PDF documents automatically. Hereâs a demo video: https://www.youtube.com/watch?v=MgfCyOyckQU&t=3s
Billions of PDFs are generated daily: invoices, contracts, receipts, reports, you name it. Developer time gets wasted producing these basic documents because there are no good-enough tools to design and generate PDFs.
We previously worked at giant firms, where documents (especially PDFs) were central to most workflows. We got asked to generate automated trade confirmations for our customerâs counterparties. We could not find any tool other than outdated libraries offering poor control over layout and the generation process. In the end, we just created our ownâbasically bringing web technologies to PDFs. That was the genesis of Onedoc.
PDF creation has two phases: design (specifying content and layout) and generation (producing the actual PDF file). Onedoc lets you do both simply and automatically.
Design: we have an open-source library called "react-print-pdf" (https://github.com/OnedocLabs/react-print-pdf) that allows you to design a document the same way you would design a website. It supports Tailwind CSS components, Chakra UI components, and recently also built LaTeX and Markdown components. The latter let you write text in Markdown style, and include formulas using LaTeX syntax, directly within a React component.
Generation: we have an API (https://docs.onedoclabs.com/api-reference/introduction) and Node.js SDK (https://docs.onedoclabs.com/quickstart/nodejs) that render your designs into PDFs.
The choice of renderer significantly affects the accuracy of the resulting PDF. For example, exporting a webpage into PDF will often result in a layout that differs from the original webpage. We ensure that what you designed is what you get, and therefore you have 100% control over the entire layout of your document including margin, style, etc. We can do that because we built the react-print-pdf library to match the HTML/CSS to PDF rendering tool we have.
Once you have generated your document, you can either store it on your local system or, if you want, use our platform (https://app.onedoclabs.com/) to host your document online. If you use us, youâll also get analytics over your documents.
Our main product is an API, but you can try it on our website directly (https://www.onedoclabs.com/) using our playground without any installation or sign-up. Our pricing is usage-based: per document generated. The pricing is degressive: the more documents you generate, the less you pay per document. If you donât want to pay for PDF generation, you can still generate as many documents as you want, but with a watermark on the margin.
Itâs been fun to see what our users are building with our open-source library (components, templates, etc.) and our API. We have a website (https://react-print.onedoclabs.com/) dedicated to the open-source library where we post the templates submitted by the community. Some early power users built simple web apps (CV/Resume generator, NDA and Invoice generator). We are excited to show our product to the HN community and look forward to your feedback!
-
Creating a dynamic invoice using react-print-pdf
Contribute to the open-source library.
-
How to use LaTeX in React to generate PDFs
If you are still here and reading this article, you probably already know what react-print-pdf is. But just in case, is collection of high-quality, unstyled components for creating beautiful PDFs using React and TypeScript. Unlike other solutions, react-print-pdf gives you complete control over your documents, allowing you to design complex layouts with features like footnotes, headers, margins, and more. Additionally, it enables you to track and analyze specific parts of your document, and build and update charts using data from your database.
-
Build complex PDFs using React: react-print-pdf
We believe documents are at the core of communicationâinvoices, contracts, resumes, brochures, etc. They are the primary method for exchanging information with others professionally. So, why do we continue to use decades-old technology to create them? We believe you deserve better. Document production needs to be modernized. Start today and create your next PDF the same way you build a web app. And yes, this includes automating data integration into your documents. Say hello to react-print-pdf.
- How to Generate Documents with React using Onedoc - A Step-by-Step Guide
- Show HN: A new open-source library to design PDF using React
react-pdf
-
How we improved our client-side PDF generation by 5x
Using react-pdf, we crafted a solution that allowed users to manipulate their reports with an impressive degree of flexibility. But, as data grew (imagine trying to cram an entire financial year's worth of invoices, up to 22,000 rows, into one PDF), our solution began to falter, especially on older PCs with limited resources.
-
Launch HN: Onedoc (YC W24) â A better way to create PDFs
https://github.com/diegomura/react-pdf is good as well if you want to use React.
-
Htmldocs: Typeset and Generate PDFs with HTML/CSS
Been using https://github.com/diegomura/react-pdf for this purpose for years
Uses React Native like components and styling.
WYSIWYG: https://react-pdf.org/repl
-
Show HN: An open-source web-app for creating resumes using YAML
Thank you. This is certainly possible. The library I'm using for rendering the PDF (https://react-pdf.org/) does support Node.js as well. This is a good point, I suppose a lot of people will have their resumes in GitHub.
- How to create dynamic PDF using React?
-
How to display a PDF and allow user to fill it and sign it directly inside a ReactJS website?
So something like this for the signature and you could use react-pdf for the PDF. Although you should consider lazy loading as itâs a big library, or render the PDF on the server to prevent bloating your UI.
-
5 Not-So-Typical React Libraries for an Outstanding Project
Website: https://react-pdf.org/
-
Failing to print a PDF file generated with "react-pdf" library. Weird error messages at console
I'm using the "react-pdf" library to generate a small PDF with some information needed by the user. Its supposed to look like a receipt and it will be printed by a thermal printer that can print basically any PDF if it is configured properly (page size etc). I can generate the PDF without any problems and render it to the screen. But at the moment I need to implement the 'print' feature of this same PDF, but I'm not having success into making this happen. Im using "printJS" library too.
- React-PDF: React renderer for creating PDF files on the browser and server
-
Convert JSX styled with TailwindCSS to a PDF?
Did you look into KendoReact PDF Generator and React-pdf?
What are some alternatives?
storefront-ui - A frontend library for Vue and React that helps developers quickly build fast, accessible, and beautiful storefronts. Made with đ by Vue Storefront team and contributors.
jsPDF - Client-side JavaScript PDF generation for everyone.
mdbootstrap - React 18 & Bootstrap 5 & Material Design 2.0 UI KIT
chakra-ui - âĄď¸ Simple, Modular & Accessible UI Components for your React Applications
gofpdf
react-pdf - Display PDFs in your React app as easily as if they were images.
officegen - Standalone Office Open XML files (Microsoft Office 2007 and later) generator for Word (docx), PowerPoint (pptx) and Excell (xlsx) in javascript. The output is a stream.
deno-puppeteer - A port of puppeteer running on Deno
redocx - đ Create word documents with React
react-to-pdf - Generate pdf from react components
react-native-windows - A framework for building native Windows apps with React.
Ink - đ React for interactive command-line apps