请考虑以下隐藏 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 中显示它。
最佳答案
试试 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 的一部分,如果有解决方法,我会更新我的答案。
关于javascript - 如何将 'hidden div' 元素导出为 PDF 而不在 UI 上显示它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45366512/