使用剑道导出pdf在页面末尾中断的图像/内容块

Posted 2023-05-07

【中文标题】使用剑道导出pdf在页面末尾中断的图像/内容块

【英文标题】：Image/block of content breaking at page end with kendos exportpdf

【发布时间】：2020-10-30 01:21:22

【问题描述】：

我正在使用 kendos exportpdf 函数将 html 模板转换为 django framework.pdf 文件中的 pdf 文件来/看起来不错。当我们仅在模板中使用文本时。当我使用 css（引导卡）添加内容块时，当涉及到页面末尾时，文本和块正在中断（如下面的屏幕截图所示）。谁能帮我解决这个问题，如果需要添加任何其他信息以便清楚理解，请告诉我。

【参考方案1】：

Kendo 的 exportpdf 使用 Kendo 绘图库，它有一个 keepTogether 设置，允许您设置哪些 CSS 类不应跨页面拆分。

drawing.drawDOM("#content", 
  paperSize: "A4",
  margin: "2cm",
  keepTogether: ".prevent-split"
).then(function(group)
  drawing.pdf.saveAs(group, "filename.pdf");
);

更多详情：https://docs.telerik.com/kendo-ui/framework/drawing/pdf-output/multi-page-content#preventing-page-breaking-in-elements

【讨论】：

感谢您的回复@G_P，我已经在我的代码中使用了它，但我仍然收到此错误。你能告诉我如何在“KeepTogether”键中添加多个类。

是的，从该链接中，它提到 keepTogether 接受可传递给 querySelector 的 CSS 选择器。如果你去developer.mozilla.org/en-US/docs/Web/API/Document/querySelector 或***.com/a/59406548/493557 你可以看到如何通过不同要求的多个类的例子。例如，将 keepTogether 设置为“.prevent-split .myClass2 .myClass3”

再次感谢您的参考，我缩​​小了解决我的问题的 pdf 文件，并将类添加到 keepTogether 设置也是一个更好的解决方案。我已接受您的解决方案。