javascript - 如何将 'hidden div' 元素导出为 PDF 而不在 UI 上显示它

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>

下面是 Kendo 导出图表作为 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 {
            }
        }

上述方法工作正常，但问题是，在将“griddata”div 元素导出为 PDF 之前，我不得不启用 div。否则，导出的 PDF 不会返回任何数据。这导致“griddata”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 的一部分，如果有解决方法，我会更新我的答案。