How to export .PDF version of `ag-grid` with fixed header?

Question

I need to export Ag-Grid to PDF. To do this I became able to convert ag-grid div to canvas (html2canvas) img. So, converting img to PDF (jsPdf) works fine.

But since I have pinned header on Grid,it only converts the visible part of grid not all rows in grid. To do this I tried something like below but didn't work

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

I also tried to send second parameter to html2Canvas like below but didnt work either

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

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

ahmedg94 ahmedg94 · Accepted Answer · 2021-04-07T12:08:57

pdfMake includes the header row of a table on every page by default.

See the example below:

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

To create the exported table you need to create a 2D array containing all columns and rows to be exported. This can be done with the ag-Grid API which allows you to iterate over all columns and rows with the methods columnApi.getAllDisplayedColumns() and gridApi.forEachNode.

How to export .PDF version of `ag-grid` with fixed header?

1 Answers