这是一次wkhtmltopdf填坑经历
在这里用了html+Vue+Css+js做了一张报告,但是在使用wkhtmltopdf插件打印的过程中,出现了各种匪夷所思的现象,也可能是它很久没有维护的原因,于是本菜鸟经过一系列的查询资料和试验进行了如下排查:
1、由于vue的“Mustache”语法没有被解析出来,最先想到的可能是,可能是它生成报告时拍照太快,vue没有加载出来;改成用模板引擎,OK,有效果了,表格和其他的数据都差不多可以正常的显示了,但是echarts并没有显示。
2、于是又想到javascript脚本执行太慢导致部分dom元素无法加载,但是并不是;
3、echarts生成曲线时,是动态的,所以没拍到,但是没道理整个echarts都不显示,被排除;
4、wkhtmltopdf不支持js的新语法,比如说let, forEach()这种;有效果了 。这里定义变量使用var, 数组循环尽量不使用新方法;
总结: 使用wkhtmltopdf时,尽量不要使用es6的一些新语法,比如let, forEach(); wkhtmltopdf对动态页面的支持效果一般, 动态页面输出pdf的需求中尽量不要有太复杂的js逻辑,尤其是一些比较大的视图框架(至少react是的)。加载的js文件最好不要太大。如果可以最好先静态化再输出。对于输出页面的样式,尤其是圆角等css3特性,能少则少,否则缺失个线条啥的都是家常便饭

Logo

前往低代码交流专区

更多推荐