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

Question

我正在使用 html-pdf to convert HTML to PDF. To add Graphs, I am using Chart.js。

生成 PDF 时，图表分为两页，如下图所示。

这就是我添加图表的方式。

<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>

我该如何解决这个问题？

Answer 1

为您的 css 添加一个 @print 部分 div:

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

并在 canvas 周围添加一个环绕 div：

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

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

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

html-pdf: How to ensure image doesn't span a page break

css

image

chart.js

html-pdf