I'm trying to export a long webpage to a PDF with multiple pages. I started building on the example in the demo here http://demos.telerik.com/kendo-ui/pdf-export/page-layout but have not been able to create a PDF with more than one page.
The documentation says that you should create a sub-Group for each pdf-page, to test in a simpler way I expanded another of your examples and create a "root" Group with 2 "p" Groups appended to it. Only the last appended sub-Group is displayed in my PDF though.
Could you please give me an example of how to do this?
var
draw = kendo.drawing;
var
geom = kendo.geometry;
var
rect =
new
geom.Rect([5, 5], [240, 240]);
var
path = draw.Path.fromRect(rect).stroke(
"red"
, 5);
var
rect2 =
new
geom.Rect([5, 5], [240, 240]);
var
path2 = draw.Path.fromRect(rect).stroke(
"blue"
, 5);
var
root =
new
draw.Group();
var
p1 =
new
draw.Group();
root.append(p1);
p1.append(path);
var
p2 =
new
draw.Group();
root.append(p2);
p2.append(path2);
draw.exportPDF(root, {
paperSize:
"A5"
,
landscape:
true
,
multiPage:
true
}).done(
function
(data) {
kendo.saveAs({
dataURI: data,
fileName:
"frame.pdf"
});
});
12 Answers, 1 is accepted


However, I have an issue with my exported PDF. When I have more number of grids and charts in the DIV that I want to export, I would like to export in multiple pages rather than all in single page. Because when I want to print it, the entire content it shrinked and fit in one single page which makes it unreadable. Can you guide me on how I can export to pdf with multiple pages?
Here is my code.
$.ajax({
type: "GET",
url: '@Url.Action("GeneratePdfReport", "Report")',
data: {
'MeasureIds': MeasureIds,
'TaskId': $("#Tasks").val(),
'TaskCategoryId': $("#TaskCategories").val(),
'ReportType': $('#ReportType').val(),
'ChartType': $('#ChartType').val(),
'ShowComments': $('#ShowComments').val(),
'ShowVarianceAnalysis': $('#ShowVarianceAnalysis').val(),
'ShowDataTable': $('#ShowDataTable').val(),
'ReportAllMeasuresInTask': $('#ReportAllMeasures').val(),
'StartDate': $('#ReportStartDate').val(),
'EndDate': $('#ReportEndDate').val(),
'UseReportDateRange': $('#UseReportDateRange').val()
},
traditional: true,
success: function(data) {
$('#ReportPlaceHolder').html(data);
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM($("#ReportPlaceHolder",{forcePageBreak:'.page-break'}))
.then(function(group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
});
})
.done(function(d) {
// Save the PDF file
kendo.saveAs({
dataURI: d,
fileName: "Iqc-Export-Pdf.pdf",
proxyURL: '@Url.Action("SaveAsPDF", "Report")',
});
});
if (document.all && !window.atob) {
$('#ReportPlaceHolder').css('display', 'block');
} else {
$('#ReportPlaceHolder').css('display', 'none');
}
}
});
'.page-break' is the css class that I added to each of the DIV containging kendo grid & chart. So I wanted to force new page on each of those DIVs so that when I print I ll have each paper containing the grid & chart.
You must add the argument multiPage: true to the exportPDF call. Also, make sure to include elements with class page-break in your HTML, at the places where you want to create a new page. E.g. <span class="page-break"></span>.
Regards,
Mihai
Telerik

Like mentioned on http://www.telerik.com/forums/export-multiple-charts-to-pdf#qzZEiTy4AE-2yCwkirV7Kw it is not available out of the box yet.
I like to have an alternative in the mean time.

var root = new kendo.drawing.Group();
$('#ReportPlaceHolder .page-break').each(function(section) {
kendo.drawing.drawDOM(this).then(function (group) {
group.options.set("pdf", {
margin: {
left: "1cm",
right: "1cm",
top: "1cm",
bottom: "1cm",
}
});
root.append(group);
});
});
root.options.set("pdf", {
multiPage: 'true',
});
kendo.drawing.pdf.saveAs(root, "iqc-pdf.pdf", '@Url.Action("SaveAsPDF", "Report")');
However, it would be nice if a grid is large and automatically spit into a second page automatically, it would be awesome.
Any thoughts?
Automatic page splitting isn't supported at this time.
On the other hand, I can confirm that using forcePageBreak does not work for charts (other HTML or widgets should be displayed, but charts will look empty). We will investigate a possible fix for that, but in the mean time your workaround is a good solution.
Regards,
Mihai
Telerik
I pushed a fix for this issue and it will be available in the next internal build (usually released on Fridays). When you'll upgrade, code like the following should work:
<p>
<button onclick="exportPDF('#test')">Export</button>
</p>
<div id="test" style="display: inline-block; border: 1px solid red; padding: 20px;">
<div id="chart1" style="width: 500px; height: 500px;"></div>
<div class="page-break"></div>
<div id="chart2" style="width: 500px; height: 500px;"></div>
</div>
<script>
function exportPDF(selector) {
kendo.drawing.drawDOM($(selector), {
forcePageBreak: ".page-break"
}).then(function(group){
group.options.set("pdf.margin", "1cm");
kendo.drawing.pdf.saveAs(group, "test.pdf");
});
}
$("#chart1").kendoChart(...);
$("#chart2").kendoChart(...);
</script>
Regards,
Mihai
Telerik
Just a correction to my previous message: I don't think this fix is going to make it in an internal build, because it's related to other features that will only show up in the next major version (the forcePageBreak option is not yet available in the stable branch).
I'm sorry for my confusion.
Regards,
Mihai
Telerik

I ll keep my solution for now till the major release comes out.
It would be an ideal solution to just pass the selector and exportPDF automatically insert the page breaks and prints in multiple pages.
​
Again, this feature is implemented and will be included in the next major release (Q1 2015).
Regards,
Mihai
Telerik

var root = new kendo.drawing.Group();
$('#ReportPlaceHolder .page-break').each(function(section) {
kendo.drawing.drawDOM(this).then(function (group) {
group.options.set("pdf", {
margin: {
left: "1cm",
right: "1cm",
top: "1cm",
bottom: "1cm"
}
});
root.append(group);
});
});
root.options.set("pdf", {
multiPage: 'true'
});
kendo.drawing.pdf.saveAs(root, "iqc-pdf.pdf", '@Url.Action("SaveAsPdf", "Report")');
Am I missing anything here? because I see the charts and multiple pages but no lines are present on each chart.
Let's keep the discussion regarding this issue focused in the support thread. It seems to be related to the chart export in particular, not the multi-page feature.
Regards,
T. Tsonev
Telerik