Creating a Document Generator in ReactJs – Quick Guide

Back to Blog
feature image for documents generator react blog

Creating a Document Generator in ReactJs – Quick Guide

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.

Polyfills image

Polyfills 2 image

image of Polyfills

For the print pdf function of that particular function 

Image of create pdf

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

Download PDF image

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

Share this post

Back to Blog