如何导出带有固定 header 的 `ag-grid`.PDF 版本？

Question

我需要将Ag-Grid导出到PDF 。 为此，我能够将ag-grid div转换为canvas (html2canvas) img 。 因此，将img转换为PDF (jsPdf) 工作正常。

但是由于我在网格上固定了 header，它只转换网格的可见部分而不是网格中的所有行。 为此，我尝试了类似下面的方法，但没有用

downloadAsPdf() {
    let doc = new jsPDF();
    html2canvas(this.agGrid["_nativeElement"]).then(canvas => {
        var imgWidth = 210;
        var pageHeight = 295;
        var imgHeight = canvas.height * imgWidth / canvas.width;
        var position = 0;
        var heightLeft = imgHeight;
        let imageData = getBase64Image(canvas);
        doc.addImage(imageData, "PNG", 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
        while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            doc.addPage();
            doc.addImage(imageData, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
        }
        doc.save("example.pdf");
    });
}

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL;
}

我还尝试将第二个参数发送到 html2Canvas，如下所示，但也没有用

    {scrollY: -window.scrollY}
{
        scrollX: 0,
        scrollY: 0
      }

Stackblitz 链接： https://stackblitz.com/edit/angular-grid-dynamic-height-snfadt?file=src%2Fapp%2Fapp.component.ts

Answer 1

默认情况下，pdfMake 在每一页上包含表格的 header 行。

请参见下面的示例：

https://stackblitz.com/edit/js-ag-grid-pdf-make?file=index.js

要创建导出的表，您需要创建一个包含所有要导出的列和行的二维数组。 这可以通过 ag-Grid API 来完成，它允许您使用方法columnApi.getAllDisplayedColumns()和gridApi.forEachNode遍历所有列和行。