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

✔️ Resize PDF on generate

Example:

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, resize, debug);

ℹ️ For best result and preview set width: 600px; and min-height: 840px of desired element or set resize to true

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

Correct:

#CSS
.element-for-print {
  width: value;
  height: value;
  etc...
}

#SCSS
.element-for-print {
  width: value;
  height: value;
  etc...
}

Wrong:

#CSS
.parent-element .element-for-print {
  width: value;
  height: value;
  etc...
}

#SCSS
.parent-element{
  .element-for-print {
    width: value;
    height: value;
    etc...
  }
}

Options

Required

• element: (string) - Target HTML element based on document.querySelector(CSS selectors)
  • View all selectors CSS selectors
• name: (string) - Choose name for the file

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