generate-pdf-from-react-html

generate-pdf-from-react-html

📄 generate-pdf-from-react-html is a React JS library for converting html to printable pdf with high quality and saving it locally.

With generate-pdf-from-react-html you can include:

✔️ Images with high quality like logos, barcodes, QR codes, etc.

✔️ Applying external, internal and inline CSS

✔️ Portrait and landscape orientations

✔️ Multiple pages

✔️ Resize PDF on generating

Generated with generate-pdf-from-react-html:

Demo

milen-minchev.github.io/generate-pdf-from-react-html-demo

Installation

Use the package manager npm to install generate-pdf-from-react-html.

npm i generate-pdf-from-react-html

Usage

import { pdfFromReact } from "generate-pdf-from-react-html";

pdfFromReact(element, name, orientation  resize, debug);

ℹ️ For best result and preview set every page to width: 600px; and min-height: 840px for portrait and to width: 841px; and min-height: 595px for landscape orientation of desired element or set resize to true and will be resized automatically.

❗ In order CSS to work correctly, targeted element must be selected at top level in your style file, for example:

Correct:

#CSS
//portrait
.element-for-print {
  width: 600px;
  min-height: 840px;
  etc...
}

#SCSS
//landscape
.element-for-print {
  width: 841px;
  min-height: 595px;
  etc...
}

Wrong:

#CSS
//portrait
.parent-element .element-for-print {
  width: 600px;
  min-height: 840px;
  etc...
}

#SCSS
//landscape
.parent-element{
  .element-for-print {
    width: 841px;
    min-height: 595px;
    etc...
  }
}

Example

import { pdfFromReact } from "generate-pdf-from-react-html";

<div>
  <h1>Example page</h1>
  <div className="element-to-print">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste quia dicta
      itaque sunt fuga, illo ad eaque ea commodi temporibus perferendis
      provident doloribus non iusto asperiores excepturi autem facere qui!
    </p>
  </div>
  <button
    onClick={() =>
      pdfFromReact(".element-to-print", "My-file", "p", true, false)
    }
  ></button>
</div>;

Options

Required

• element : (string) - Target HTML element based on document.querySelector(CSS selectors) like ".element-for-print", "#element-for-print" etc.
  • View all selectors CSS selectors
• name : (string) - Choose name for the file
• orientation : (string) - Choose orientation portrait ("p") or landscape ("l")

Optional, default is false

• resize : (boolean) - If set to true sets fixed size of A4 (width and min-height) on generate. ❗ Targeted element must be responsive for best result ❗
• debug : (boolean) - If set to true it's open generated PDF in new window for preview without automatically downloading it.

License

MIT