Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nadavkli/react-to-pdf-ts
Transform React components into PDFs effortlessly! Leverage TypeScript and Puppeteer for high-quality, customizable PDFs with just a few lines of code.
https://github.com/nadavkli/react-to-pdf-ts
nodejs pdf pdf-generation puppeteer react reactjs typescript
Last synced: about 22 hours ago
JSON representation
Transform React components into PDFs effortlessly! Leverage TypeScript and Puppeteer for high-quality, customizable PDFs with just a few lines of code.
- Host: GitHub
- URL: https://github.com/nadavkli/react-to-pdf-ts
- Owner: nadavkli
- License: mit
- Created: 2023-11-13T14:28:14.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-17T10:03:19.000Z (11 months ago)
- Last Synced: 2025-01-10T10:44:22.808Z (26 days ago)
- Topics: nodejs, pdf, pdf-generation, puppeteer, react, reactjs, typescript
- Language: TypeScript
- Homepage:
- Size: 12.6 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-to-pdf-ts
This package provides a convenient and efficient way to convert React components into PDF files, leveraging the
capabilities of Puppeteer in a TypeScript environment. It is designed with a focus on ease of use, flexibility, and
robustness, making it an ideal solution for projects requiring PDF generation from React components.
## Features
- **React to PDF Conversion**: Seamlessly convert React components into high-quality PDF files.
- **Buffer Support**: No need to write to disk; you can also get the PDF as a buffer.
- **Puppeteer Integration**: Utilizes Puppeteer for reliable and accurate rendering.
- **TypeScript Support**: Full TypeScript support ensures type safety and developer-friendly usage.
- **Customizable Options**: Offers a range of customization options for Puppeteer, giving you control over the PDF
generation process.
## Prerequisites
Before using `react-to-pdf-ts`, ensure the following is set up in your Node.js TypeScript project:
- **Node.js** and **npm** (or **yarn**) installed.
- A project set up with **TypeScript**.
- **React** and **React DOM**: Install these as they are peer dependencies of this package.
```bash
npm install react react-dom
## Installation
Install the package using npm:
```bash
npm install react-to-pdf-ts
```
## Usage
Before you begin, make sure your TypeScript configuration (`tsconfig.json`) supports JSX. Set `"jsx": "react"` in your
compiler options.
Additionally, when working with JSX in TypeScript, use the `.tsx` extension for your files. TypeScript treats `.tsx`
files differently due to the JSX syntax.
Here's a quick example to get you started with `react-to-pdf-ts` in a TypeScript project:
1. **Import the package:**
```typescript
import {convertToPdf} from 'react-to-pdf-ts';
import * as React from 'react';
```
2. **Create a React Component:**
You can either define a new React component or import an existing one. Here's an example of a simple component:
```typescript
const MyComponent: React.FC = () =>
Hello PDF World!;
```
3. **Convert to PDF:**
Call `convertToPdf` with your component and specify the output path for the PDF file:
```typescript
convertToPdf(, {outputPath: './output.pdf'})
.then((buffer: Buffer) => console.log('PDF buffer:', buffer))
.catch(error => console.error('Error creating PDF:', error));
```
Ensure that your TypeScript project is properly set up to compile JSX.
## API
### `convertToPdf(component: React.ReactElement, options: ConvertToPdfOptions): Promise`
- `component`: React component you wish to convert into a PDF.
- `options`: Configuration options for PDF generation.
- `outputPath`: (optional) File path to save the generated PDF.
- `puppeteerOptions` (optional): Custom options for Puppeteer.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for full details.