CODEWITHSUNDEEP
javascripthtmlkendo-ui
Karthik
Karthik

Reputation: 65

how to export the 'hidden div' element as PDF without showing it on the UI

Please consider the following hidden div element. I am using it as a hidden element to construct the PDF contents and trying to download as PDF.

HTML elements declared as below.

<div id="griddata" style="display:none;">
 <div id="reportHeader" style="display:none;">
   Consider other elements that I want to show in the PDf here
</div>
</div>

And below is the Kendo Export chart as PDF code, Which I will call through the LoadPDF function.

  function LoadPDF() {
            try {                       
                $("#griddata").show();                        
                $("#reportHeader").show();

                if ($("#chartDiv").html() != null && $("#griddata").html() != '') {
                    setTimeout(function () {
                    kendo.drawing.drawDOM($("#griddata"))
                    .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: window.sessionStorage.getItem('XXXName') + ".pdf",
                            proxyURL: "/Account/Export"
                        });

                        $("#reportHeader").hide();                                
                        $("#griddata").hide();


                    });
                    }, 2000);
                    }
            }
            catch (e) {
                $("#reportHeader").hide();                       
                $("#griddata").hide();     
                UMGenerateAlert('Error while exporting data');
            }
            finally {
            }
        }

The above method works fine, but the problem is, before exporting the "griddata" div elements as PDF, I am forced to ENABLE the div. Otherwise the exported PDF returns no data. This causing the "griddata" div to appear on the screen till the PDF gets exported and gets hidden once the document is downloaded.

Please suggest me how we can handle this, without displaying it in the UI.

Upvotes: 3

Views: 6876

Answers (2)

Turo
Turo

Reputation: 1607

I just came across similar question myself couple days ago and got it working based on this answer, which is to overlay your pdf div with another div. Here render-pdf is the div where your kendo pdf gets loaded.

<div id="pdf-with-overlay" style="position: relative; width: 100%;">
    <div id="render-pdf"></div>
    <div id="pdf-overlay" style="width:100%;height:100%;position: absolute;top:0;left:0;z-index:10;"></div>
</div>

PS. In the scenario I mention I do an overlay instead of hiding, as found hiding also has some limitations e.g. if you want to draw pdf to canvas, hidden one will show no content.

Upvotes: 0

Aung Myo Linn
Aung Myo Linn

Reputation: 2890

Try CSS Print Media Query:

@media print { 
 /* All your print styles go here */
    #header, #footer, #nav { display: none !important; } 
    #griddata, #reportHeader { display: block !important; } 
}

Or the old way:

<link href="/print.css" rel="stylesheet" media="print" type="text/css" />

Regarding the grid part, have you already tried using visibility: hidden;? since the space and dimensions of the element are preserved.

If I were you, I would just show an overlay layer with a loading progress bar that covers the grid area and hide it after finish hidding the grid.

Anyway, display: none is still part of the DOM, I'll update my answer if there is a workaround.

Upvotes: 2

Related Questions