解决的问题

创建html模板，用于转换为pdf，以便动态的pdf文件。

什么样的html才能转为pdf

所有的html都能转换pdf，只是转换库的不同，可能有部分css样式有部分差异。

未能转换成功的原因可能是没有定义字体，font-family，在body上设置一下字体即可解决。

配置项

1、元素中断配置

1）、break-inside

分页时元素可能会被切割，如果不想被切割可以添加css样式：

div {
    break-inside: avoid;
    page-break-inside: avoid; // 由于兼容性原因，旧的 `page-break-inside` 属性应该被浏览器视为 `break-inside` 的别名
}

属性值	含义
auto	允许（但不强制）在主框中插入任何中断（页、栏或区域）。
avoid	避免在主框中插入任何中断（页、栏或区域）。
avoid-page （page-break-inside无效）	避免主框中的任何页中断。
avoid-column （page-break-inside无效）	避免主框中的任何栏中断。
avoid-region （实验性、page-break-inside无效）	避免主框中的任何区域中断。

2）、break-before和break-after

属性值	含义
auto	默认值。如果必要则在元素前插入分页符。
always	在元素前插入分页符。
avoid	避免在元素前插入分页符。
left	在元素之前足够的分页符，一直到一张空白的左页为止。
right	在元素之前足够的分页符，一直到一张空白的右页为止。
inherit	规定应该从父元素继承 page-break-before 属性的设置。

注意：只能用于position 值为 relative 或 static 的非浮动块级元素。

2、页面大小及页边距设置（媒体查询打印样式设置@page）

@media print {
    @page {
        /* A4大小 */
        size: A4;
        /* 边距，普通a4纸张边距 */
        margin: 2.54cm 3.18cm;
    }
}

size 也可以用来设置打印方向，即可以改为纵向打印；

注意: 不能使用 @page 规则修改所有的css属性，只能修改文档的 margin、orphans、windows 和分页符，对其他属性的修改无效。

关于pdf分页

分页和页面布局相关。

1、自适应宽高（只1页pdf）

根据屏幕自适应宽高的，此时的pdf会只有一页，不会进行分页，转换为pdf如

2、非自适应宽高（分页pdf）

一般的html，非根据屏幕自适应宽高的，转换为pdf时都会默认分页；但是分页的元素可能会被切割拆分，如

补充： 分页时元素被切割

分页时元素可能会被切割，如果不想被切割可以添加css样式：

div {
    break-inside: avoid;
    page-break-inside: avoid; // 由于兼容性原因，旧的 `page-break-inside` 属性应该被浏览器视为 `break-inside` 的别名
}

属性值	含义
auto	允许（但不强制）在主框中插入任何中断（页、栏或区域）。
avoid	避免在主框中插入任何中断（页、栏或区域）。
avoid-page （page-break-inside无效）	避免主框中的任何页中断。
avoid-column （page-break-inside无效）	避免主框中的任何栏中断。
avoid-region （实验性、page-break-inside无效）	避免主框中的任何区域中断。。