[英]html-pdf: How to ensure image doesn't span a page break
I am using html-pdf to convert HTML to PDF. 我正在使用html-pdf将HTML转换为PDF。 To add Graphs, I am using Chart.js .
要添加图,我正在使用Chart.js 。
When generate the PDF, Graph break into two pages as shown in below image. 生成PDF时,Graph分为两页,如下图所示。
This is how I add the Graph. 这就是我添加图表的方式。
<canvas id="bar-chart" class="canvas-styles margin-top-20"
style="display: block; page-break-before: auto; page-break-after: auto; page-break-inside: avoid;">
</canvas>
How could I solve this? 我该如何解决?
Add into your css an @print section for your div: 将div的@print部分添加到CSS中:
@media print {
div#canvasWrap { width: 2.4cm; }
}
And add a wrapping div around your canvas: 并在画布周围添加一个包装div:
<div id="canvasWrap">
<canvas id="bar-chart" class="canvas-styles"></canvas>
</div>
Add any styles you need to the wrapper ... 将您需要的任何样式添加到包装器...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.