如何解决如何导出带有固定标头的.ag-grid .PDF版本?
我需要将Ag-Grid
导出到PDF
。为此,我能够将ag-grid
div
转换为canvas
(html2canvas)img
。因此,将img
转换为PDF
(jsPdf)很好。
但是由于我已经将标题固定在Grid上,所以它仅转换网格的可见部分,而不转换网格中的所有行。 为此,我尝试了以下类似操作,但没有成功
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",position,imgWidth,imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imageData,'PNG',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);
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
解决方法
pdfMake 默认在每一页都包含表格的标题行。
请看下面的例子:
https://stackblitz.com/edit/js-ag-grid-pdf-make?file=index.js
要创建导出的表,您需要创建一个包含要导出的所有列和行的二维数组。这可以通过 ag-Grid API 完成,该 API 允许您使用 columnApi.getAllDisplayedColumns()
和 gridApi.forEachNode
方法迭代所有列和行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。