Creating a Document Generator in ReactJs — Quick Guide

3 min readOct 7, 2024

Html-PDFmake is a software which is used to create pdf easily with JavaScript. We can also find some online demos on the internet for guidance. This module converts the valid html to identical to pdf.

How to Use Document Generator in ReactJs?

By this simple steps you can convert your html code to an pdf
There are some online solutions available and if not you can simply convert your HTML to Canvas and then export it to PDF.
Here we have is jsPDF which is also an pdf maker, which can be added as –
Polyfills, where in polyfills need a fully equipped API to work properly, we can load pre bundled files which actually might not upload files multiple times but still be agile for small apps or software.

For the print pdf function of that particular function

pdfMake.createPdf(docDefinitions).open();

This function create the pdf with the help of browser and open pdf in new tab of the Browser.

pdfMake.createPdf(dd).download();

Above function use for the download the pdf in our system it use as:-

Example:-

HTML Tag Supported

The below tags are supported by html to pdfmake

DIV / P / SPAN
UL / OL / LI
SUP / SUB
TABLE / THEAD / TBODY / TFOOTER / TR / TH / TD

And others.

CSS Properties Supported

This can create very compound designs, this handle most of the complex HTML/CSS, but the only thing is it has limited style and may be may not work in all cases with values

font-family
background-color
margin
white-space (with break-spaces and pre*)
text-decoration
followed by more designs as well.

Units

This software uses pt units for the numbers by checking the inline styles and if the unit of the number is given it will change or convert it to pt.
Example :- Margin :1em will change to Margin:12 after applying html to pdfmake.

Good to Read:- What is redux toolkit? | Setup Redux Toolkit in React

Unique Properties

This software has some special effects like width and height for tables and more, but to use this special effects you must use some sort of proper data-pdfmake to HTML element and then have to pass on to JSON String which is a text format for storing and transporting data.

Features of a PDFMake

Numbered and bulleted lists
Images and Graphics
Line Wrapping
Alignments of texts (left, right, center)

Tables and Columns

Keeps the header and rows together
If the page breaks the header automatically repeats
Auto/fixed/star-sized/percentage columns widths
Col-spans and row-spans
Non-breaking rows

Others

Fonts enrooting
Setting of PDF metadata
The content table
Support for simple, multi-level structures
Background layer

Related Post:-

Originally published at https://www.devstringx.com on July 07, 2024