css - html-pdf:如何确保图像不跨越分页符

我正在使用html-pdf将HTML转换为PDF。要添加图，我正在使用Chart.js。

生成PDF时，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>

我该如何解决？

最佳答案

将div的@print部分添加到CSS中：

@media print {
     div#canvasWrap { width: 2.4cm; }
  }

并在画布周围添加一个包装div：

<div id="canvasWrap">
    <canvas id="bar-chart" class="canvas-styles"></canvas>
</div>

将您需要的任何样式添加到包装器...

关于css - html-pdf:如何确保图像不跨越分页符，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55015587/