Hi,
I'd like to export the grid to PDF, and need to add column headers on each page.
I was able to apply the page template (page header and footer), but couldn't add the column headers on the grid on each page..
Also, I'd like to change font size when it exports to PDF. how can I change the font size?
Thank you,
// Export handler
$("#export").on("click", function () {
var grid = $("#grid").data("kendoGrid");
grid.hideColumn(3);
grid.columns[0].width = "60px";
grid.columns[1].width = "60px";
grid.refresh();
kendo.drawing.drawDOM("#grid", {
forcePageBreak: ".page-break",
paperSize: "Legal",
landscape: true,
margin: {
left : "2mm",
top : "30mm",
right : "2mm",
bottom : "40mm"
},
template: $("#page-template").html()
})
.then(function (group) {
kendo.drawing.pdf.saveAs(group, "CFCReport.pdf");
var grid = $("#grid").data("kendoGrid");
grid.showColumn(3);
grid.refresh();
});
6 Answers, 1 is accepted
Thank you for contacting us.
I would recommend you to examine the following help article which elaborates more on your requirement. Generally the topic demonstrates how to customize the pdf layout the way you prefer.
I hope this information helps.
Regards,
Kostadin
Telerik
Rank 1
I have a issue with the page template:
When My code is this:
function getPDF(selector) {
kendo.drawing.drawDOM($(selector))
.then(function(group){
kendo.drawing.pdf.saveAs(group, "Narrative.pdf",{
paperSize: "Letter",
margin: { left: "1cm", top: "1cm", right: "2cm", bottom: "1cm" }
});
});
} it creates the PDF fine.
But when I change it, so I can add the page template later,
the code
function getPDF(selector) {
kendo.drawing.drawDOM($(selector, {
paperSize: "A4",
margin: { left: "0cm", top: "1cm", right: "0cm", bottom: "1cm" }
})).then(function (group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group);
}).done(function (data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "Narrative.pdf",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
});
});
}
does not create a PDF
can you tell me what I am missing?
I created a simple demo which looks like yours and behaves as expected. You can test it here:
http://dojo.telerik.com/IsOgU
Let me know if I'm missing something.
Regards,
Daniel
Telerik
Rank 1
Dear Admin,
I have an issue regarding to export pdf kendo grid with group header: Sort icon & menu context icon are too weirded in PDF file. Could you please give me some suggestions ? Thank you so much.
Steps to reproduce:
1. Create a group by, sort a column as the attached image.
2. Click export PDF
Actual result: Sort icon & menu context icon are too weirded in PDF file (please refer the attached image).
Expected result: The exported pdf file displays as well as data in kendo grid.
This is my code:
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/multicolumnheaders">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
toolbar: ["pdf"],
pdf: {
fileName: 'abc.pdf',
allPages: true,
paperSize: 'auto',
margin: { top: "3cm", right: "1cm", bottom: "1cm", left: "1cm" },
},
height: 550,
groupable: true,
sortable: true,
resizable: true,
reorderable: true,
pageable: true,
columnMenu: true,
columns: [{
field: "CompanyName",
title: "Company Name",
width: 420
},
{
field: "Country",
title: "Country",
width: 200
},
{
field: "City",
title: "City",
width: 200
},
{
field: "Phone",
title: "Phone",
width: 200
},
]});
});
</script>
</div>
</body>
</html>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
When the stylesheet and font files used in the page are hosted on a different domain (CDN in this case), you need to explicitly define the fonts, which should be loaded while exporting the Grid to PDF. In this case, you would need to define WebComponentsIcons.ttf, which contains the Kendo UI icons:
<script> kendo.pdf.defineFont({ "WebComponentsIcons": "https://kendo.cdn.telerik.com/2018.3.911/styles/fonts/glyphs/WebComponentsIcons.ttf" });</script>Here, you can see that icons load as expected in the exported document:
http://dojo.telerik.com/@tsveti/eLayACAv
Regards,
Tsvetina
Progress Telerik
Rank 1