Css html pdf：如何确保图像不失真'；不要跨越分页符

我正在使用将HTML转换为PDF。要添加图形，我使用

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

---

我如何解决这个问题？

在css中为您的div添加一个@print部分：

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

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

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

---

将所需的任何样式添加到包装器…

如果用相对定位的

div

包围

画布，并将该容器设置为
内联块
，是否有帮助？或者只是将您的

canvas`元素中的所有

样式信息移动到父
div
容器中。@andyhofman尝试了这个，但没有成功<代码>

你有没有办法在某处发布一个实例？我想更仔细地研究一下。谢谢你的回答

@media print{div#canvaswrapp{width:9.26cm；}}

经过此修改后，成为一种魅力。