1. 介绍
wkhtmltopdf/wkhtmltoimage 用于将简单的html页面转换为pdf或图片；
2.安装
downloads
2.1. mac os
下载64-bit 版本然后按照指示安装, 遇到 untrust developers 时，需要在 Settings -> Privacy 处信任下该安装包。
2.2. debian
# 可用于Dockerfile中
apt update && apt install wkhtmltopdf
3. 使用
wkhtmltopdf&wkhtmltoimage 内嵌了一个QT浏览器，其原理是会使用该内嵌的浏览器打开html文件或链接，然后对该网页进行截图处理；
注意事项
(1) 导出的图片或pdf空白：由于wkhtmltopdf&wkhtmltoimage 0.12.6 最新版发布于 2020-7-11, 其使用的QT浏览器由于版本比较旧，可能会无法识别较新版本的javascript语法，比如我们使用的eCharts组件，那么此时我们需要降低echarts.js的版本， 可以参考example，这位老哥给出了一段html代码，经测试，可以被渲染出来；
(2) 导出的图片没有完全渲染完成：因为eChart生成的canvas通常有一个动画效果，我们可以通过添加 --javascript-delay 1000 参数延迟截取图片的时间。
3.1. eCharts Example
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<style>
.reportGraph {width:900px}
</style>
</head>
<body>
<div class="reportGraph"><canvas id="canvas"></canvas></div>
<script type="text/javascript">
// wkhtmltopdf 0.12.5 crash fix.
// https://github.com/wkhtmltopdf/wkhtmltopdf/issues/3242#issuecomment-518099192
'use strict';
(function(setLineDash) {
CanvasRenderingContext2D.prototype.setLineDash = function() {
if(!arguments[0].length){
arguments[0] = [1,0];
}
// Now, call the original method
return setLineDash.apply(this, arguments);
};
})(CanvasRenderingContext2D.prototype.setLineDash);
Function.prototype.bind = Function.prototype.bind || function (thisp) {
var fn = this;
return function () {
return fn.apply(thisp, arguments);
};
};
function drawGraphs() {
new Chart(
document.getElementById("canvas"), {
"responsive": false,
"type":"line",
"data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First Dataset","data":[65,59,80,81,56,55,40],"fill":false,"borderColor":"rgb(75, 192, 192)","lineTension":0.1}]},
"options":{}
}
);
}
window.onload = function() {
drawGraphs();
};
</script>
</body>
</html>
wkhtmltoimage --debug-javascript --enable-local-file-access --no-stop-slow-scripts --javascript-delay 1000 ./index.html index.jpg
!!!注意我们需要开启debug-javascript，这样当本地测试正常，但是抛出syntax error的时候，我们就知道需要降低我们使用javascript的语法格式以及eChart的版本了!!!
3.2. python 使用
# imgkit 是对 wkhtmltoimage的一层简单封装, 因此我们需要先安装好wkhtmltopdf
pip install imgkit
import imgkit
# html 是整个index.html文件的字符串
imgkit --from_string(html, output_path="/tmp/xxx.jpg", options={
"no-stop-slow-scripts": "",
"javascript-delay": 1000
})
Reference
wkhtmltoimage&wkhtmltopdf
