Angular Gridster2 how to export all items to a PDF?

Question

We have a dashboard in angular application which is made in gridster2. It contains several widgets, we wants that all the widgets should get exported to a pdf in A4 size. what libraries can help us do that thing.

We have tried convas2html which is not production ready, and get stuck when page is long.

Answer 1

import { jsPDF } from 'jspdf';
import domtoimage from 'dom-to-image';  

@ViewChild('gridStack') gridStack!: ElementRef;

downloadAsPDF(): void {
    const dashboard = this.gridStack.nativeElement;
    const dashboardHeight = dashboard.clientHeight;
    const dashboardWidth = dashboard.clientWidth;
    const options = {
        background: 'white',
        width: dashboardWidth,
        height: dashboardHeight,
    };
    domtoimage.toPng(dashboard, options).then((imgData: any) => {
        const doc = new jsPDF(
            dashboardWidth > dashboardHeight ? 'l' : 'p',
            'mm',
            [dashboardWidth, dashboardHeight]
        );
        const imgProps = doc.getImageProperties(imgData);
        const pdfWidth = doc.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

        doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        doc.save(this.dashboard.name);
    });
}