css - html-pdf:如何确保图像不跨越分页符
问题描述
我正在使用html-pdf将 HTML 转换为 PDF。要添加图表,我使用的是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>
我怎么能解决这个问题?
解决方案
为您的 div 添加一个 @print 部分到您的 css 中:
@media print {
div#canvasWrap { width: 2.4cm; }
}
并在画布周围添加一个包装 div:
<div id="canvasWrap">
<canvas id="bar-chart" class="canvas-styles"></canvas>
</div>
将您需要的任何样式添加到包装器...
推荐阅读
- python - python中的difflib get_close_matches错误
- types - 如何更改 jupyter notebook 的默认主题(jt-r)的字体大小和类型?
- javascript - 另一个函数中的Javascript异步函数
- c# - 如何检查子字符串是否是引号
- c++ - 右值会默默衰减吗?
- reactjs - 如何根据滚动位置使用 css 动画来执行此操作?
- database - TDengine 子查询核心转储
- visual-studio - 谷歌云 KMS/HSM 证书
- azure-devops - 如何删除 Azure Pipelines 中的旧程序集工件?
- shell - 如何使用 sed 将以“/”开头的单词的每一行中的最后一个实例大写?