[Solved] PDF Export

[ziental]

I am making an application where it will be necessary to create a PDF with more than 2 pages.
From the documentation I saw that it is necessary to generate the HTML in a DIV and generate the PDF.
This is working fine when it's just a page.
But for multiple pages this is giving problem.

 

What I need is a way to "hide" the "GeneratedPDF" Div for the user and only generate the PDF (when hidden the content is not generated in the PDF).

And how do I page break between the two sample URLs?

 

My code:

<div id="GeneratedPDF"></div>
<script>
    $("#btnCreatePDF").click(function () {
        var html = "";
        $.ajax({
            url: "/PageForTheExample1",
            type: "GET",
            dataType: "html",
            success: function (data) {
                html += data;
                $.ajax({
                    url: "/PageForTheExample2",
                    type: "GET",
                    dataType: "html",
                    success: function (data) {
                        html += data;
                        CreatePDF(html);
                    }
            }
        });

    });
    function CreatePDF(html) {
        $('#GeneratedPDF').html(html);
        kendo.drawing.drawDOM($('#GeneratedPDF')).then(function (group) {
            kendo.drawing.pdf.saveAs(group, "Export.pdf");
        });
    }
</script>

 

xxx

[Martin]

Hello Zdzislaw,

Thank you for the provided code snippet. Unfortunately the given information is not enough for me to completely understand the scenario. Could you please provide a working Dojo example along with further explanation about the desired result? I will then be happy to assist you.

Regarding the page breaking, you can refer to this article about Multi-Page content. If you wish to separate your content in different pages after each ajax call, you can add the forcePageBreak property with class ".k-page-break".

Let me know if I can be of further help.

Regards,
Martin
Progress Telerik

[ziental]

The code is very simple, and I believe the problem is in the interaction of html gives page with the DIV.

In "image01.jpg" the layout is illustrated (In Portuguese, I am from Brazil).
It is a page for creating a bull catalog. The user selects the bulls on a previous page and here he will generate a PDF with one bull per page. Each bull page is created by a URL each.

When the user clicks the "Imprimir Touros" button (#btnContinue2), the catalog creation process is created.

Code bellow:

<script>
    $("#btnContinue2").click(function () {
        var html = "";
        $.ajax({
            url: "/Busca/Catalog_Create_Bulls",
            type: "GET",
            dataType: "json",
            success: function (data) {
                // here i get the list of all URLs
                var max = data.length;
                var count = 0;
                $.each(data, function (i, v) {
                    $.ajax({
                        url: v,
                        type: "GET",
                        dataType: "html",
                        success: function (data) {
                            // access each url from the list and concatenate the generated HTML by adding the pagebreak.
                            count = count + 1;
                            if (count > 1) {
                                html += "<span class='pagebreak'></span>";
                            }
                            html += data;
                            if (max === count) {
                                // when all the html codes were generated i call the function to create the pdf
                                CreatePDF(html);
                            }
                        }
                    });
                });
            }
        });
    });
    function CreatePDF(html) {
        // This is an example to create two pages with a text
        // html = "<span>Teste</span><br><Br><br><span class='pagebreak'></span><span>TESTE2</span>";

        // I associate the received html to the DIV that is behind the image
        $('#ResultCatalog').html(html);

        kendo.drawing.drawDOM('#ResultCatalog', {
            forcePageBreak: ".pagebreak",
            paperSize: "auto",
        }).then(function(group){
          group.options.set("pdf.margin", "1cm");
          kendo.drawing.pdf.saveAs(group, "Catalog.pdf");
        });

    }
</script>

 

The problem is that in the generated HTML there are tags "html" and "body", and when I associate the html with the DIV, it changes the page layout (image02.jpg).

When I use the code "THIS IS AN EXAMPLE" without the "html" tags, it works without problems.

Is there any way to "isolate" the generated html code from the page code, or use the directly generated HTML code to create the PDF without associating it with a DIV?

Thanks

[Martin]

Hello Zdzislaw,

Thank you for the additional information.

Generally the code you are using looks fine. The problem is, as you said, with the html and body tags. A div which contains these tags is invalid and therefore cannot be exported. Normally you should be able to return any kind of HTML from the controller, which will allow you to get an element that can be nested in the div:

public ContentResult Get()
{
    return new ContentResult
    {
        ContentType = "text/html",
        StatusCode = (int)HttpStatusCode.OK,
        Content = "<span>This is span</span>",                
    };
}

I am afraid that isolating the generated HTML code cannot be done through the Kendo Drawing Api. It only exports existing elements that are visible and rendered.

I hope I was helpful. If you have additional questions or if I missed some important detail, do not hesitate to get back to me.

Regards,
Martin
Progress Telerik