Angular convert html to pdf with css

Question

I need to convert html to pdf with css, I used windows.print() but it doesn't include css styles

Html:

<button type="submit" (click)="generatePDFDescription()">
Generate Pdf
</button>
<div id="print-section">
...
</div>

Component classe:

@Component({
  selector: 'app-generate-pdf-description',
  templateUrl: './generate-pdf-description.component.html',
  styleUrls: ['./generate-pdf-description.component.scss']
})
export class GeneratePdfDescriptionComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  generatePDFDescription(): void {
    const element: Element = document.getElementById('print-section');
    let myWindows = window.open('', 'PRINT', 'height=400,with=600');
    myWindows.document.write("<!DOCTYPE html><html><head><meta charset='utf-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'>"+
    + "<meta name='viewport' content='width=device-width, initial-scale=1'>"
    + "<link rel='stylesheet' type='text/css' media='screen' href='./generate-pdf-description.component.scss'>");
    myWindows.document.write('</head><body>');
    myWindows.document.write(element.innerHTML);
    myWindows.document.write('</body></html>');
    myWindows.document.close();
    myWindows.focus();
    myWindows.print();
  }

}

Result:

Expected result:

You're trying to link a scss file instead of compiled css. Browser is not understanding it. I'd suggest to directly add your styles "manually" or link a compiled css. For the image: whould you share your HTML code? Not sure if it's dealing with the file location (maybe using the absolute path to the image solve it). — Daniel Guzman
– Daniel Guzman, Commented Dec 22, 2020 at 17:06

Dharman · Accepted Answer · 2021-06-19 09:23:11Z

1

First, you need to install some packages in your angular application. So, open your terminal and execute the following commands:

npm install --save pdfmake
npm install html-to-pdfmake
npm install jspdf --save

Add code on View file, for example:

<div class="container">
  <div id="pdfTable" #pdfTable>
    <h2>Angular HTML To PDF Generator Example</h2>
               
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Website</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sam</td>
          <td>Sam</td>
          <td>tutsmake.com</td>
        </tr>
        <tr>
          <td>john</td>
          <td>dam</td>
          <td>w3school.com</td>
        </tr>
        <tr>
          <td>jonhy</td>
          <td>hid</td>
          <td>geeks.com</td>
        </tr>
      </tbody>
    </table>
  </div>
  <button class="btn btn-primary" (click)="downloadAsPDF()">Export To PDF</button>
</div>

Add code on component .ts file, for example:

import { Component, ViewChild, ElementRef } from '@angular/core';
   
import jsPDF from 'jspdf';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import htmlToPdfmake from 'html-to-pdfmake';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'htmlToPDF';
   
  @ViewChild('pdfTable') pdfTable: ElementRef;
   
  public downloadAsPDF() {
    const doc = new jsPDF();
    
    const pdfTable = this.pdfTable.nativeElement;
    
    var html = htmlToPdfmake(pdfTable.innerHTML);
      
    const documentDefinition = { content: html };
    pdfMake.createPdf(documentDefinition).open(); 
      
  }
}

Finally, test your application.

edited Jun 19, 2021 at 9:23

Dharman♦

34k27 gold badges106 silver badges158 bronze badges

answered Jun 19, 2021 at 9:17

Mehdi Daustany

1,2364 gold badges11 silver badges23 bronze badges

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

4 Comments

Ousama Over a year ago

This libraries doesn't work for big documents, my doc contain over than 50 pages. Thank you

Mehdi Daustany Over a year ago

In this case, you can use Crystal Reports or Stimul Reports, these third-parties will helpful for big data.

Mehdi Daustany Over a year ago

You welcome dear, good luck. If you didn't find solution let me know, I'll help.

Tristate Over a year ago

As I see this solution totaly ignores css?

Abdullah Umar Babsel · Accepted Answer · 2021-07-04 14:04:47Z

I solve my problem for export HTML to multiple-page PDF. I create canvas per div. Perhaps this is will help you all.

private canvas: any = {
        monthYearCanvas: null,
        monthYearHeight: 0,
        periodCanvas: null,
        periodHeight: 0,
        assetCanvas: null,
        assetHeight: 0,
        badActorCanvas: null,
        badActorHeight: 0,
        eventCanvas: null,
        eventHeight: 0,
        tenLowOffCanvas: null,
        tenLowOffHeight: 0,
    };

public triggerPrintReport(): void {
            if (
                this.isLoadingMonthYear ||
                this.isLoadingOnPeriod ||
                this.isLoadingOnAsset ||
                this.isLoadingOnBadActor ||
                this.isLoadingOnEvent ||
                this.isLoadingTenLowOff
            ) {
                alert('Wait for load data');
                return;
            }
    
            this.messageReport = true;
    
            const monthYearHTML = document.getElementById('htmlData-monthYear');
            const periodHTML = document.getElementById('htmlData-period');
            const assetHTML = document.getElementById('htmlData-asset');
            const badActorHTML = document.getElementById('htmlData-badActor');
            const eventHTML = document.getElementById('htmlData-event');
            const tenLowOffHTML = document.getElementById('htmlData-tenLowOff');
    
            this.createCanvasURL(monthYearHTML, 'monthYear');
            this.createCanvasURL(periodHTML, 'period');
            this.createCanvasURL(assetHTML, 'asset');
            this.createCanvasURL(badActorHTML, 'badActor');
            this.createCanvasURL(eventHTML, 'event');
            this.createCanvasURL(tenLowOffHTML, 'tenLowOff');
        }
    
        private createCanvasURL(element: any, type: string): void {
            html2canvas(element).then(canvas => {
                const width = 208;
    
                if (type === 'monthYear') {
                    this.canvas.monthYearHeight = canvas.height * width / canvas.width;
                    this.canvas.monthYearCanvas = canvas.toDataURL('image/png');
                } else if (type === 'period') {
                    this.canvas.periodHeight = canvas.height * width / canvas.width;
                    this.canvas.periodCanvas = canvas.toDataURL('image/png');
                } else if (type === 'asset') {
                    this.canvas.assetHeight = canvas.height * width / canvas.width;
                    this.canvas.assetCanvas = canvas.toDataURL('image/png');
                } else if (type === 'badActor') {
                    this.canvas.badActorHeight = canvas.height * width / canvas.width;
                    this.canvas.badActorCanvas = canvas.toDataURL('image/png');
                } else if (type === 'event') {
                    this.canvas.eventHeight = canvas.height * width / canvas.width;
                    this.canvas.eventCanvas = canvas.toDataURL('image/png');
                } else if (type === 'tenLowOff') {
                    this.canvas.tenLowOffHeight = canvas.height * width / canvas.width;
                    this.canvas.tenLowOffCanvas = canvas.toDataURL('image/png');
                }
    
                this.exportPDF();
            });
        }
    
        private exportPDF(): void {
            const PDF = new jsPDF('p', 'mm', 'a4');
    
            if (
                this.canvas.monthYearCanvas &&
                this.canvas.periodCanvas &&
                this.canvas.assetCanvas &&
                this.canvas.badActorCanvas &&
                this.canvas.badActorCanvas &&
                this.canvas.tenLowOffCanvas
            ) {
                PDF.addImage(this.canvas.monthYearCanvas, 'PNG', 1, 10, 208, this.canvas.monthYearHeight);
                PDF.addImage(this.canvas.periodCanvas, 'PNG', 1, 125, 208, this.canvas.periodHeight);
                PDF.addPage();
                PDF.addImage(this.canvas.assetCanvas, 'PNG', 1, 10, 208, this.canvas.assetHeight);
                PDF.addPage();
                PDF.addImage(this.canvas.badActorCanvas, 'PNG', 1, 10, 208, this.canvas.badActorHeight);
                PDF.addPage();
                PDF.addImage(this.canvas.eventCanvas, 'PNG', 1, 10, 208, this.canvas.eventHeight);
                PDF.addPage('l');
                PDF.addImage(this.canvas.tenLowOffCanvas, 'PNG', 1, 10, 208, this.canvas.tenLowOffHeight);
    
                this.messageReport = false;
    
                PDF.save('angular-demo.pdf');
            }
        }

Ousama · Accepted Answer · 2020-12-22 17:06:16Z

0

I fixed this issue by doing two things:

Adding minify css:

You can use this web site CSS Formatter to Minifiy your css.

I solved the image problem by adding the base url:

answered Dec 22, 2020 at 17:06

Ousama

2,8803 gold badges31 silver badges30 bronze badges

Comments

Yunus Yerli · Accepted Answer · 2022-08-17 11:48:38Z

0

html2pdf.js npm library is coverting html to pdf but can affect performance of app.

answered Aug 17, 2022 at 11:48

Yunus Yerli

1241 silver badge7 bronze badges

Collectives™ on Stack Overflow

Angular convert html to pdf with css

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related