DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

A library that simplifies the process of generating PDF files from JSON configurations

Easy React PDF

Overview

A library that simplifies the process of generating PDF files from JSON configurations

The Easy React PDF is a library that simplifies the process of generating PDF files from JSON configurations. With this library, you can easily create complex PDF documents with various styles, layouts, and content. and make it easy for templating PDF files.

Installation

You can install the library using npm:

npm install easy-react-pdf
Enter fullscreen mode Exit fullscreen mode

Note

you need install react, react-pdf and react-dom in your project

npm install react react-dom @react-pdf/renderer
Enter fullscreen mode Exit fullscreen mode

Usage

Node js

Stream File

import { createStreamPDF, IPDFPage } from "easy-react-pdf";

async function main(template: IPDFPage) {
  const stream = await createStreamPDF(template);
  return stream.pipe(fs.createWriteStream("output.pdf"));
}
Enter fullscreen mode Exit fullscreen mode

Create File

import { createFilePDF, IPDFPage } from "easy-react-pdf";

async function main(template: IPDFPage) {
  await createFilePDF(template, "path/to/file.pdf");
}
Enter fullscreen mode Exit fullscreen mode

React

import { PDFViewer } from "@react-pdf/renderer";
import { Document } from "easy-react-pdf";

function Main(template: IPDFPage) {
  return (
    <PDFViewer>
      <Document {...template} />
    </PDFViewer>
  );
}
Enter fullscreen mode Exit fullscreen mode

Example Template

const contents: IPDFPage = {
  contents: [
    {
      type: "views",
      style: {
        width: "100%",
        height: "100%",
        alignItems: "center",
        justifyContent: "center",
        display: "flex",
      },
      contents: [
        {
          type: "text",
          text: "Hello World",
          style: {
            fontSize: 20,
            fontWeight: "bold",
          },
        },
      ],
    },
  ],
  document: {
    title: "Payment Schedules",
  },
  pages: {
    size: "A4",
  },
};
Enter fullscreen mode Exit fullscreen mode

GitHub

View Github

Top comments (0)