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
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
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.