wkhtmltopdf chartjs

背景

前文 提到了项目中引用了https://www.chartjs.org/，几经尝试一度以为它们互不兼容。百度谷歌了许久，又自己尝试了多次。终于还是找到了它们配合的点。

wkhtmltopdf

这里面使用的版本必须是https://github.com/wkhtmltopdf/wkhtmltopdf/releases/0.12.2.1

chartjs

好多文章说chartjs必须使用2.6.0版本，但是实测2.5.x和2.7.x都可以通过。下面是一个可以成功在pdf中显示的代码示例：

样式调整

• 在实际导出时会遇到div间出现了半页的空白，这是由于div设置了overflow-x:visible样式，将其调整为默认即可。如果影响页面显示，建议给导出单独做一个页面。
• 表格过宽导致显示被截断，是由于设置了white-space:nowrap样式，将其调整为默认即可。如果影响页面显示，建议给导出单独做一个页面。
• 表格的内容过多大于一页时会出现在第二页的第一行重复显示标题且与第一行重叠。这里需要设置table样式thead, tfoot {display: table-row-group;}
• 表格的内容过多大于一页时会偶现一行内容被从中间截断，上下页各显示半行，体验特别不好。这里需要使用wkhtmltopdf的选项：

wkhtmltopdf --margin-top 10mm --margin-bottom 10mm https://www.baidu.com baidu.pdf

另外，建议开启打印模式，开启打印模式后，表格的奇偶行标色会失效，尝试了一段时间无果后点开chrome的打印预览看一下也会失效。所以就没有继续解决。

wkhtmltopdf --print-media-type --margin-top 10mm --margin-bottom 10mm --lowquality https://www.baidu.com baidu.pdf