captureScreen() {
        const pdf = new jsPDF('p', 'mm');
        const promises = $('.pdf-intro').map(function(index, element) {
            return new Promise(function(resolve, reject) {
                html2canvas(element, { allowTaint: true, logging: true })
                    .then(function(canvas) {
                        resolve(canvas.toDataURL('image/jpeg', 1.0));
                    })
                    .catch(function(error) {
                        reject('error in PDF page: ' + index);
                    });
            });
        });

        Promise.all(promises).then(function(dataURLS) {
            console.log(dataURLS);
            for (const ind in dataURLS) {
                if (dataURLS.hasOwnProperty(ind)) {
                    console.log(ind);
                    pdf.addImage(
                        dataURLS[ind],
                        'JPEG',
                        0,
                        0,
                        pdf.internal.pageSize.getWidth(),
                        pdf.internal.pageSize.getHeight(),
                    );
                    pdf.addPage();
                }
            }
            pdf.save('HTML-Document.pdf');
        });
    }

To utilize the code above, it is necessary to import jsPDF and html2Canvas into the project:

    import * as jsPDF from 'jspdf';
    import * as html2canvas from 'html2canvas';

For this, the following npm packages need to be installed:

    npm install jspdf --save
    npm install --save @types/jspdf
    npm install html2canvas --save
    npm install --save @types/html2canvas

The next step involves adding the paths to the scripts tag within the angular.json file:

    "node_modules/jspdf/dist/jspdf.min.js"

Add HTML content within the component.html file as shown below:

<div>
  <input type="button" value="CAPTURE" (click)="captureScreen()" />
</div>
<div class="pdf-intro">HTML content</div>
<div class="pdf-intro">HTML content</div>
<div class="pdf-intro">HTML content</div>
<div class="pdf-intro">HTML content</div>

Apply CSS styles as usual within the component.css file for proper rendering.

This approach should help address any related issues you encounter with the implementation.

To export an HTML div with the id='dashboard', you can utilize the jsPDF library along with the dom to image package.

Start by installing the necessary packages:

import * as domtoimage from 'dom-to-image';
import * as FileSaver from 'file-saver';
import * as jsPDF from 'jspdf';

Inside your TypeScript file, include the following code:

domtoimage.toPng(document.getElementById('dashboard'))
    .then(function (blob) {
        var pdf = new jsPDF('l', 'pt', [$('gridster').width(), $('gridster').height()]);
        pdf.addImage(blob, 'PNG', 0, 0, $('gridster').width(), $('gridster').height());
        pdf.save(`${that.dashboardName}.pdf`);
    });

In your HTML file, define the gridster element with the id 'dashboard':

<gridster id='dashboard'></gridster>

To overcome your problem, consider using html2canvas. Make the necessary code adjustments as shown below.

generatePDF() {
const document = new jsPDF();
const contentToCapture = this.contentToCapture.nativeElement;
html2canvas(contentToCapture).then(canvas => {
        const imageData = canvas.toDataURL('image/png');
        // Required settings
        const imageWidth = 208;
        const pageHeight = 295;
        const imageHeight = canvas.height * imageWidth / canvas.width;
        const document = new jspdf('p', 'mm');
        let remainingHeight = imageHeight;
        let currentPosition = 0;

        document.addImage(imageData, 'PNG', 0, currentPosition, imageWidth, imageHeight);
        remainingHeight -= pageHeight;
        while (remainingHeight >= 0) {
            currentPosition = remainingHeight - imageHeight;
            document.addPage();
            document.addImage(imageData, 'PNG', 0, currentPosition, imageWidth, imageHeight);
            remainingHeight -= pageHeight;
        }
        // PDF file created successfully
        document.save('document_name' + '.pdf');
    });

}

[ npm install jspdf
And to install html2canvas package, use given npm command. npm install html2canvas
Following the successful installation, proceed to import it into our component using an import statement.

            > import * as jspdf from 'jspdf';      import html2canvas from
            > 'html2canvas';

                <div id="content" #content>  
            <mat-card>  
                <div class="alert alert-info">  
                    <strong>Html To PDF Conversion - Angular 6</strong>  
                </div>  
                <div>  
                <input type="button" value="CAPTURE" (click)="captureScreen()"/>  
                </div>  
            </mat-card>  
            </div>  
            <div >  
            <mat-card>  
                <table id="contentToConvert">  
                    <tr>  
                    <th>Column1</th>  
                    <th>Column2</th>  
                    <th>Column3</th>  
                    </tr>  
                    <tr>  
                    <td>Row 1</td>  
                    <td>Row 1</td>  
                    <td>Row 1</td>  
                    </tr>  
                    <tr>  
                    <td>Row 2</td>  
                    <td>Row 2</td>  
                    <td>Row 2</td>  
                    </tr>  
                    <tr>  
                    <td>Row 3</td>  
                    <td>Row 3</td>  
                    <td>Row 3</td>  
                    </tr>  
                    <tr>  
                    <td>Row 4</td>  
                    <td>Row 4</td>  
                    <td>Row 4</td>  
                    </tr>  
                    <tr>  
                    <td>Row 5</td>  
                    <td>Row 5</td>  
                    <td>Row 5</td>  
                    </tr>  
                    <tr>  
                    <td>Row 6</td>  
                    <td>Row 6</td>  
                    <td>Row 6</td>  
                    </tr>  
                </table>  

            </mat-card>  
            </div>  

                import { Component, OnInit, ElementRef ,ViewChild} from '@angular/core';  
            import * as jspdf from 'jspdf';  
            import html2canvas from 'html2canvas';  

            @Component({  
            selector: 'app-htmltopdf',  
            templateUrl: './htmltopdf.component.html',  
            styleUrls: ['./htmltopdf.component.css']  
            })  
            export class HtmltopdfComponent{  
            public captureScreen()  
            {  
                var data = document.getElementById('contentToConvert');  
                html2canvas(data).then(canvas => {  
                // Few necessary setting options  
                var imgWidth = 208;   
                var pageHeight = 295;    
                var imgHeight = canvas.height * imgWidth / canvas.width;  
                var heightLeft = imgHeight;  

                const contentDataURL = canvas.toDataURL('image/png')  
                let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
                var position = 0;  
                pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
                pdf.save('MYPdf.pdf'); // Generated PDF   
                });  
            }  
            } 

                new JsPDF(  
                Orientation, // Landscape or Portrait  

                unit, // mm, cm, in  

                format // A2, A4 etc  
            );  

For a helpful guide, check out this StackBlitz example. Feel free to incorporate it into your demo.

import {jsPDF} from 'jspdf';


public generatePDF() {
   const doc = new jsPDF();
   .....
}