wkhtmltopdf使用中遇到的渲染问题 wkhtmltopdf使用中遇到的渲染问题

问题1. wkhtmltopdf生成pdf过程中出现echart无法渲染问题，思路就是在服务端渲染echart图表，以base64形式展示到img标签上。asyncData是nuxt.js运行在服务端的生命周期。

node-canvas在服务端运行，需要根据不同操作系统配置环境，可以按照官方步骤配置
相似问题参考
【wkhtmltopdf使用中遇到的渲染问题】使用node-canvas可能会遇到babel配置问题，可以参考

{ "presets": ["@babel/preset-env"] }

问题2. table表格分页之后出现多余的表头，解决方法

thead { display: table-row-group; }

问题3. 对于不想tr分页被分割在两页时，可以设置

tr { page-break-inside: avoid !important; }

问题4. 需要pdf在章节强制分页，可以在需要分页的地方插入一个div。

.divider { page-break-before: always; }

问题5. 对于Vue、React单页应用项目可能存在无法渲染生成pdf问题，也可能是wkhtmltopdf内核版本问题，不过试了公司好几个项目都不行，最后使用了nuxt.js来进行服务端渲染。

wkhtmltopdf使用中遇到的渲染问题