1

I'm trying to generate a pdf with css, and I'm not having much success. I have a string that contains html with inline css, but when I use jsPDF, the generated PDF doesn't include styling. I read that in order to include styling, I should also use html2canvas and then add an image with jsPDF. However, none of it works for me.

Here's my code:

@Component({
  selector: 'app-pdf-generator',
  templateUrl: './pdf-generator.component.html',
  styleUrls: ['./pdf-generator.component.css'],      
  host: { '[@routeAnimation]': 'true', 'style' : 'display:block;' }

  onSubmit()
  {
     let servers = this.serversService.getServers();
     var rows = this.buildServerListByOptions(servers)
     var htmlText = this.buildPdfText(rows); //the final html string I want to render on a PDF file.


     //Here I need to genereate a DOM element, create an image of it using html2canvas, and then save as PDF. I **don't** want the element to appear on the page though, only in the PDF file.

     // doc.addImage(canvas, 0,0,100,100);
     // doc.save('report.pdf')

Despite reading all I could find on the web, I still am not able to use the html2canvas library. I would appreciate a code sample that is relevant to my example (creating DOM element dynamically, creating an image of it, adding to PDF) or maybe another way to generate PDF with CSS support using angular.

Thanks!

Improve this question

1 Answer 1

Reset to default
3

Here is an example to generate pdf for your reference.. But here I haven´t used html2canvas for styling. Hope it will help you:

In HTML:

<a class="page-link" style="  (click)="convert()">Generate PDF</a>

In TS file:

import * as jsPDF from 'jspdf';
import 'jspdf-autotable';

And use the below function :

convert() {

    var doc = new jsPDF();
    var col = ["Id", "TypeID","Accnt","Amnt","Start","End","Contrapartida"];
    var rows = [];

    var imgData = 'data:image/jpeg;base64,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H3mzT6KBhRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/9k='




var rowCountModNew = [
["1721079361", "0001", "2100074911", "200", "22112017", "23112017", "51696"],
["1721079362", "0002", "2100074912", "300", "22112017", "23112017", "51691"],
["1721079363", "0003", "2100074913", "400", "22112017", "23112017", "51692"],
["1721079364", "0004", "2100074914", "500", "22112017", "23112017", "51693"]
]


rowCountModNew.forEach(element => {
      rows.push(element);

    });



    doc.addImage(imgData, 'JPEG', 90, 60, 20, 20);


    doc.autoTable(col, rows);
    doc.save('Test.pdf');
  }

To add text before and after table:

convert() {       
    var doc = new jsPDF();
    var col = ["Id", "TypeID","Accnt","Amnt","Start","End","Contrapartida"];
    var rows = [];    
    var imgData = 'data:image/jpeg;base64,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H3mzT6KBhRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/9k='   


var rowCountModNew = [
["1721079361", "0001", "2100074911", "200", "22112017", "23112017", "51696"],
["1721079362", "0002", "2100074912", "300", "22112017", "23112017", "51691"],
["1721079363", "0003", "2100074913", "400", "22112017", "23112017", "51692"],
["1721079364", "0004", "2100074914", "500", "22112017", "23112017", "51693"]
]

rowCountModNew.forEach(element => {
      rows.push(element);          
    });

    doc.text(80, 20, 'Report Final');
    doc.addImage(imgData, 'JPEG', 90, 40, 20, 20);    
    doc.autoTable(col, rows,{startY: 60});
    doc.text(80, 130, 'Thank you');
    doc.save('Test.pdf');        
  }

And it will look like:enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thanks, but wasn't able to get autotable to work, got that weird error message.
ok..Can you put the error message? And one question..Did you run this command: npm install jspdf-autotable --save
Well, I am able to install it, but when I try to run it I get: doc.autotable is not a function at Pdf-generator.component.ts
I looked up this error and I saw some people fixed it by using require instead of import, but that didn't solve it for me. Still getting the same error.
Finally got it to work after variations on the improts. I have another question though. After using autoTable, is it possible to add more text to the pdf before saving? I tried doc.fromHTML but it ignores the table and as a result the two collide. I want text to appear above the table and below it. Is that possible?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.