Dynamic PDF Generation Angular , NodeJS

by

enter image description here

Trying to generate a pdf something like this. Although this is not ideal.
for more than a week has gone, not able figure which approach should i go for.
Client Side : html to pdf generation didn’t go well with jspdf ,html2pdf ,pdfMake.

No matter ,if it’s achived on either client side or server side.
Front-end: Angular, Back-end : NodeJS
Any suggestions on this would be great

What i have tried so far,

  generatePDF(): void {
    const doc = new jsPDF();
    var margins = {
      top: 0, bottom: 60, left: 40, right: 200
    };
    const pdfTable = this.pdfTable.nativeElement;

    var html = htmlToPdfmake(pdfTable.innerHTML);

    const documentDefinition = { content: html ,pageMargins: [15, 20, 0, 0] };
    pdfMake.createPdf(documentDefinition).open();
  }

HTML

<div id="pdfTable" #pdfTable>
  <h3 style="text-align: center;">MANUFACTURING FEASIBILITY REVIEW RECORD</h3>
  <div *ngFor="let item of feasibilityFormValue; let i = index">
    <p>{{item.dept}}</p>
    <p>{{item.review}}</p>
    <p>{{item.feasible}}</p>
    <p></p>
  </div>
</div>

Tried this basic html to convert to pdf. It’s just not coming as expected.
styles like flex won’t work in libraries like jspdf

  • PDF is a fixed media so what size of page will you fixate on? There is letter for part of this planet and A4 for the other part. So your html needs to be less than 594×792 to suit both halves of the globe. Perhaps use a page size of 580×775 ? So then add margins of 7 and 8 units to width and height (you will not please either side of planet, but you will not upset all of half.) Now once you have set the media its no problem to add a print button since 2 out of 3 users should be able to save as PDF.

    – 




you may use puppeteer to create pdf in node js

for reference:
puppeteer’s official website

puppeteer NPM package

there might be limitations in terms of css support, you could fix it with simplifiing the html structure, f.e. using a table instead of the paragraphs in the div. I hope this helps..

Leave a Comment