angular - Angular Gridster2 如何将所有项目导出为 PDF？

Question

我们在 Angular 应用程序中有一个仪表板，它是在 gridster2 中制作的。它包含几个小部件，我们希望所有小部件都应导出为 A4 大小的 pdf。哪些图书馆可以帮助我们做这件事。

我们已经尝试了 convas2html ，它还没有准备好生产，当页面很长时会卡住。

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);
    });
}