React-on-the-fly-pdf NPM

React On The Fly PDF

Generate Multipage PDF document on the fly for React.js applications.
React-on-the-fly-pdf is a simple react package which converts HTML page into a multipage PDF document on the fly. Here are the list of features.

Online Demo

Features:

Converts any HTML page into a PDF document.
You can customize your PDF document using CSS.
Generates multipage PDF document.
Generate PDF document on the click of the button.
If the content doesn't fit in a page, it will be moved to next page, AUTOMATICALLY.
Supports headers in all pages.
Supports footer text and page number.
Supports 9 different paper sizes (A0 to A8)

Install

npm install --save react-on-the-fly-pdf

Usage

import React from 'react'
import ReactPdf from 'react-on-the-fly-pdf'
import 'style.css'

export function ExampleComponent{
  return (
    // Header
    <div id="pdfHeader">
        <h3>Testing</h3>
    </div>

    // Content
    <div className="reactPdf">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra ut dui eu mattis. Praesent nec sapien eget sapien ultrices ultricies at nec massa. Maecenas varius pellentesque ligula a faucibus. Suspendisse iaculis, magna non vestibulum interdum, mauris nulla pulvinar nunc, vitae tempus leo urna vitae odio. Ut pulvinar quam et venenatis tempor. Fusce nec sapien ut magna aliquet vestibulum eu quis elit. Pellentesque vel ante diam. Integer quis ipsum ante. Fusce semper eu tortor ac dignissim. Praesent eget tellus sit amet tortor condimentum eleifend. Suspendisse ac tortor arcu. Morbi dignissim vehicula luctus.
    </div>
    <div className="reactPdf">
      Curabitur odio purus, fringilla vel feugiat eget, malesuada id tellus. Quisque fringilla aliquam dolor. Etiam mollis eros vel facilisis faucibus. Sed non lacus ligula. Suspendisse potenti. Aliquam ac ligula interdum, sagittis odio vitae, ultricies urna. Donec faucibus imperdiet neque ut hendrerit. Morbi volutpat nisi bibendum nulla tempus, in egestas tortor luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </div>

    // React-on-the-fly-pdf component
    <ReactPdf 
        paperSize="a4"
        contentClassName="reactPdf" 
        headerId="pdfHeader" 
        footer={{pageNumber: true, displayText: 'Something', color: "#999"}} 
        fileName="filename.pdf"
        button={{buttonText : "Download", buttonClassName: 'button_style'}}
    />
  )  
}

Documentation

After installing the package, first import the package.

import ReactPdf from 'react-on-the-fly-pdf'

After importing, you can use the component by calling the 'ReactPdf' component.

<ReactPdf 
    paperSize="a4"
    fileName="filename.pdf"
    headerId="pdfHeader" 
    contentClassName="reactPdf" 
    footer={{pageNumber: true, displayText: 'Something', color: "#999"}} 
    button={{buttonText : "Download", buttonClassName: 'button_style'}}
/>

Here are the props which you can pass to the 'ReactPdf' component.

Prop	Type	Default	Description
paperSize	String	'a4'	Specify the paper size for your PDF document. It can be from a0 to a8. It should be small case.
fileName	String	'fileName.pdf'	Specify the filename you want.
headerId	String	null	If you want header, then create a header block and give some 'id'. Pass that 'id' to 'headerId' props. Header will appear in all pages.
contentClassName	String	-	This field is mandatory. Split your content in multiple blocks and for each block give the same 'class name'. Pass that class name to the 'contentClassName' props. Content will automatically move to the next page if it doesn't fit in a page.
footer	Object	null	pageNumber - Boolean. If you want page number, pass true.
			displayText - String. If you want to display some text in footer, pass it here.
			color - String. Pass the color code here.
button	Object	-	buttonText - String. Button text.
			buttonClassName - Pass a 'class name' to customize the button.

FAQ and Known issues

PDF is not getting downloaded

Make sure you are passing 'contentClassName' and 'headerId'. If you don't want header, then don't pass 'headerId'.

Some content are not getting displayed in PDF document, but it is there in HTML

It could be because of two reasons.

You clicked download before your content get loaded. Make sure to display the 'Download' button only after loading all the content.
Try adding position: relative to the tag which is not showing up.

Styles are not rendering properly

Most of the fancy stylings won't appear in PDF. For example, box-shadow won't get rendered.

I don't want header in all pages. I just want at the start.

Don't pass header if you don't want it to appear in all pages. Just create a 'header' block and add the same class name which you are using for 'contentClassName' prop.