将包含多个Kendo图表的页面导出为信纸大小的PDF
将包含多个Kendo图表的页面导出为信纸大小的PDF
提问于 2019-05-21 01:54:34
我试图导出一个带有HTML/CSS和大约19个图表的网页到一个多页信纸大小的PDF。
到目前为止，它可以在一个连续的页面上导出整个网页，但是，如果打印，它将缩小到只适合一页。
下面的javascript用于导出PDF，在图表区域之间的所有div上设置纸张大小、页边距和强制分页符。
是否需要在剑道图表JS本身中声明某些内容？
$("#export-pdf").click(function () {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM($(".content-wrapper"))
.then(function (group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group, {
paperSize: "a4",
margin: "2cm",
// Page Break divs between each partial with a kendo chart
forcePageBreak: ".page-break"
});
})
.done(function (data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "exportPDF")).pdf",
});
});使用上面的JS，它显示了一些非常奇怪的东西：
网页顶部的1/4被放大并裁剪成信纸大小的页面。仅生成1页。
我们正在尝试让kendo export pdf函数将"content-wrapper“中的所有内容放在多个信纸大小的页面上，这样它就可以打印出来并可读。
任何帮助或见解都是非常感谢的！
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-24 03:31:52
我把"pageSize“、"margin”和"forcePageBreak“放错了位置--它必须在drawDom事件中才能正常工作。
已更正代码：
$("#export-pdf").click(function () {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM(".content-wrapper", {
paperSize: "a4",
margin: "2cm",
// Page Break divs between each partial with a kendo chart
forcePageBreak: ".page-break"
})
.then(function (group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group);
})
.done(function (data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "exportPDF")).pdf",
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56225928
复制相关文章
相似问题