This is a migrated thread and some comments may be shown as answers.

Export PDF of an MVC Page

1 Answer 255 Views

Drawing API

This is a migrated thread and some comments may be shown as answers.

Robert asked on 09 Feb 2016, 06:54 PM

exportpdf.png

I am trying to export a MVC page to a pdf file. Following are some of the issues I am facing in order to do a PDF Export:

Issue1: While this works well, the first issue is that it exports to a single pdf page. However I understand that if I move the paperSize and margin options to drawDOM then multipage export works fine but all the selected mvc radiobuttons on the page gets cleared.
Though the radiobutton selection shows the selected value in the pdf, it gets cleared off the page. This only happens when I move the pagesize and margin options to drawDOM. The selection is retained when those options are added to exportPDF but multipage does not work. (I am using @Html.RadioButtonFor control in the project)
Issue2: The content inside the MVC controls like TextBoxFor and EditorFor seems to not show up correctly in PDF. The content moves up in the box and hence not visible in the pdf. The below image has an example of this issue:

Here is the code for reference:

@{
ViewBag.Title = "Export";
}

<h2>Export</h2>

<input type="button" value="Export PDF without pagebreak" id="ExportButton1" class="btn btn-default pull-right" /><br/>
<input type="button" value="Export PDF with pagebreak" id="ExportButton2" class="btn btn-default pull-left" />

<div class="form-horizontal margin-top-20" style="margin-top:70px;">
<div class="pdf-page size-a4">

Name:@Html.TextBox("Name", null, new { @class = "form-control" })<br />
Desc:@Html.TextArea("Description", null, new { @class = "form-control" })<br />
@for (int i = 0; i < 100; i++)
{
<text> Radio @i</text>
@Html.RadioButton("Radio", i, new { @class = "form-control" })<br />
}
</div>
</div>

@section scripts {
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", "#ExportButton1", function () {
kendo.drawing.drawDOM($(".pdf-page"))
.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 (data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "Test.pdf",
});
})
});
});

$(document).ready(function () {
$(document).on("click", "#ExportButton2", function () {
kendo.drawing.drawDOM($(".pdf-page"),{
paperSize: "A4",
margin: { left: "1cm", top: "1cm", right: "1cm", 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: "Test.pdf",
});
})
});
});

</script>
}

Export PDF of an MVC Page

1 Answer, 1 is accepted