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)
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