wkhtmltopdf生成pdf时中断和canvas画柱状图的颜色值变为黑色

在网页端一切正常的情况下进行生成时,试了好多次都如下面所示

wkhtmltopdf生成pdf时中断和canvas画柱状图的颜色值变为黑色_第1张图片

最终经过一步步排查发现是在画图时设置了ctx.setLineDash([]);导致把此设置删除后即可成功生成,但ctx.setLineDash([]);是把虚线设置为实线的过程,所以处理这里可以把画实现放在画虚线前即可,还有一个更快捷的方式就是设置为ctx.setLineDash([0,0]);亲测有效

wkhtmltopdf生成pdf时中断和canvas画柱状图的颜色值变为黑色_第2张图片

生成后,发现柱状图本来网页看着蓝色的,结果变成了黑色

wkhtmltopdf生成pdf时中断和canvas画柱状图的颜色值变为黑色_第3张图片

又经过排查发现是ctx.fillStyle =['#3149FF'];这里的设置不能用数组,直接设置为ctx.fillStyle = '#3149FF';后进行生成即可得到正确的颜色。

wkhtmltopdf生成pdf时中断和canvas画柱状图的颜色值变为黑色_第4张图片

但最终发现和网页端还是存在一些差异,因为虚线和背景色基本是一致的,在真正的图标中看到右侧的虚线的是非常淡的,网页端的图如下,大体的已经成功,接下来的就是一些小微调了,算完美成功了。

wkhtmltopdf生成pdf时中断和canvas画柱状图的颜色值变为黑色_第5张图片

你可能感兴趣的:(wkhtmltopdf,前端,js,javascript,前端)