记一次使用laravel-snappy把g2和plotly.js图生成pdf踩坑经历

最近有一个需求，需要把页面上的echarts等js组件生成的图表放到pdf中。使用laravel框架，找到了laravel-snappy这个包，其底层是使用wkhtmltopdf来生成pdf。因为有把数据点都画到箱型图上的需求，找到了plotly.js这个组件，功能还是很强大的，可以轻松实现如下的效果

 页面都没问题，然使用laravel-snappy生成pdf文件中图形无论如何都显示不出来，一开始以为是页面上图表太多的原因，然后就发现了即使只有一个plotly.js或者g2画的图，生成的pdf文件也还是无法显示。echarts散点图只要不是数据太多，可以正常显示，当然前提要加上animation：false，这里还是要表扬下echarts。

至于plotly,js、g2图无法显示的问题，直接用命令行执行  wkhtmltopdf http://127.0.0.1:8000/pdf1 ./a.pdf  还是不行。

仔细阅读了 wkhtmltopdf 的文档，找到了如下的参数  ：

1 --javascript-delay  3000  等待js执行3秒后再生成pdf

2  --no-stop-slow-scripts 允许执行较慢的js执行

3 --debug-javascript 显示错误

命令行加上--debug-javascript 后 wkhtmltopdf --javascript-delay 1000 --debug-javascript --no-stop-slow-scripts http://127.0.0.1:8000/pdf1 ./a.pdf  出现了下面的warning

 然而页面上同时引入的echarts并没有报错，g2和plotly却报错了。然后再调试，把页面上g2和plotly画图的代码去掉只引用g2.min.js和plotly,min.js后，命令行执行上面的命令，依然报错。无解的问题。令人沮丧。

 顺便要提一下的是：wkhtmltopdf底层使用QT浏览器，可以安装QT浏览器来进行调试：http://www.qtweb.net/download.html

 

生成pdf用于处理分页问题的css属性 

 .keep-together {
      page-break-inside: avoid;
}
.break-before {
     page-break-before: always;
}
.break-after {
     page-break-after: always;
}

 

 中文字体问题：

方法1：linux的/usr/share/fonts目录放中文字体

方法2： 阿里巴巴普惠体 (alibabafonts.com)，此种方法可能会导致生成pdf文件中前几个echarts的中文无法显示

@font-face {
      font-family: 'AlibabaSansHK';
      src: url({{ asset('public/fonts/AlibabaSansHK-45.ttf') }}) format('truetype');
}
body {
     font-family: 'AlibabaSansHK';
}