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

Question

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.

what happens if you put everything in a another container div that has the style="display:none;" The griddata and reportHeader should inherit that and not be visible, but at their own, they might show up in the PDF. — Jeroen, Jul 28 '17 at 07:29
@Jeroen: Yes I tried that, but if we specify style="display:none;" to that container div, I am getting empty page in PDF :/ — Karthik, Jul 28 '17 at 11:21

Aung Myo Linn · Answer 1 · 2017-07-28T07:40:02.250

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.

Turo · Answer 2 · 2017-07-28T12:44:57.180

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.

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

2 Answers2