Export PDF of an MVC Page

2 posts, 0 answers
  1. Robert
    Robert avatar
    1 posts
    Member since:
    Oct 2014

    Posted 09 Feb Link to this post

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

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 11 Feb Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top