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

Export PDF of an MVC Page

1 Answer 200 Views
Drawing API
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 09 Feb 2016, 06:54 PM

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>
}

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 12 Feb 2016, 05:11 AM
Hello,

I'll summarize our findings from the related support ticket for community reference.

Clearing the radio-button selection during export is a confirmed bug. A fix is in the works.

The offset text seems to be caused by a combination of the Bootstrap styles and max-width set on the element.
We're investigating and hope to have a fix for that as well. Setting only width is a possible workaround.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Drawing API
Asked by
Robert
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or