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 generating

✔️ Loading indicating finishing of function

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

ℹ️ For best result and preview set width: 600px; and min-height: 840px 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
.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...
  }
}

Example

import { pdfFromReact, loading } 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>
  {loading ? (
    <p>Generating pdf...</p>
  ) : (
    <button
      onClick={() => pdfFromReact(".element-to-print", "My-file", 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

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.

Loading

loading : (boolean) to indicate whether the the generating is finished.

License

MIT