Question

请考虑以下隐藏 div元素。我使用它作为隐藏元素来构建PDF内容并尝试下载为PDF。

HTML元素声明如下。

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

以下是剑道出口图表的PDF代码，我将通过 LoadPDF 函数调用。

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

上述方法工作正常，但问题是，在导出＆＃34; griddata＆＃34; div元素为PDF，我被迫启用div。否则导出的PDF不返回任何数据。这导致＆＃34; griddata＆＃34; div将出现在屏幕上，直到PDF导出并在下载文档后隐藏。

请建议我如何处理此问题，而不在UI中显示。

Answer 1

尝试 CSS打印媒体查询：

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

或旧方式：

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

关于网格部分，您是否已尝试使用visibility: hidden;？因为元素的空间和尺寸得以保留。

如果我是你，我只会显示一个覆盖层，其中有一个覆盖网格区域的加载进度条，并在完成隐藏网格后隐藏它。

无论如何，display: none仍然是DOM的一部分，如果有解决方法，我会更新我的答案。

Answer 2

我几天前刚刚遇到类似的问题，并根据this回答让它工作，这是用另一个div覆盖你的pdf div。这里render-pdf是你的kendo pdf加载的div。

<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。在我提到的场景中，我做了叠加而不是隐藏，因为发现隐藏也有一些限制，例如：如果你想将pdf绘制到画布，隐藏的将不显示任何内容。

如何导出隐藏的div＆＃39;元素为PDF而不在UI

2 个答案: