记一次使用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 的文档，找到了如下的参数

• --javascript-delay:3000 等待 js 执行 3 秒后再生成 pdf
• --no-stop-slow-scripts 允许执行较慢的 js 执行
• --debug-javascript 显示错误

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

然而页面上同时引入的 echart s并没有报错，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';
}