wkhtmltoimage/wkhtmltopdf 使用实践

1. 介绍

wkhtmltopdf/wkhtmltoimage 用于将简单的html页面转换为pdf或图片;

2.安装

downloads

2.1. mac os

下载64-bit 版本然后按照指示安装, 遇到 untrust developers 时,需要在 Settings -> Privacy 处信任下该安装包。

2.2. debian

shell 复制代码
# 可用于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

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>
shell 复制代码
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 使用

shell 复制代码
# imgkit 是对 wkhtmltoimage的一层简单封装, 因此我们需要先安装好wkhtmltopdf
pip install imgkit
python 复制代码
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

相关推荐
香吧香4 个月前
Grafana的仪表盘URL参数设置
监控·tools
%d%d27 个月前
The Missing Semester ( Shell 工具和脚本 和 Vim)
ssh·vim·shell·mit·tools
leoninew7 个月前
dotnet 命令行工具解决方案 PomeloCli
dotnet·tools·command line
Alex_StarSky9 个月前
GPT实战系列-LangChain构建自定义Agent
gpt·langchain·agent·tools
Alex_StarSky9 个月前
GPT实战系列-构建多参数的自定义LangChain工具
gpt·langchain·agent·tools
Alex_StarSky9 个月前
GPT实战系列-使用LangChain内部工具
gpt·langchain·tools·搜索工具
Alex_StarSky9 个月前
GPT实战系列-通过Basetool构建自定义LangChain工具方法
gpt·langchain·tools·basetool
witton1 年前
VSCode使用Makefile Tools插件开发C/C++程序
c语言·c++·vscode·乱码·makefile·module·tools
Alex_StarSky1 年前
GPT实战系列-ChatGLM3管理工具的API接口
gpt·langchain·llm·tools·chatglm3·大模型助手·股票查询