wkhtmltoimage/wkhtmltopdf 使用实践

1. 介绍

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

2.安装

2.1. mac os

下载64-bit 版本然后按照指示安装, 遇到 untrust developers 时，需要在 Settings -> Privacy 处信任下该安装包。
在这里插入图片描述

2.2. debian

# 可用于Dockerfile中
apt update && apt install wkhtmltopdf
1
2

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

wkhtmltoimage --debug-javascript --enable-local-file-access --no-stop-slow-scripts --javascript-delay 1000 ./index.html index.jpg
1

!!!注意我们需要开启debug-javascript，这样当本地测试正常，但是抛出syntax error的时候，我们就知道需要降低我们使用javascript的语法格式以及eChart的版本了!!!
在这里插入图片描述

3.2. python 使用

# imgkit 是对 wkhtmltoimage的一层简单封装, 因此我们需要先安装好wkhtmltopdf
pip install imgkit
1
2

import imgkit
# html 是整个index.html文件的字符串
imgkit --from_string(html, output_path="/tmp/xxx.jpg", options={
"no-stop-slow-scripts": "",
"javascript-delay": 1000
})
1
2
3
4
5
6

Reference

wkhtmltoimage&wkhtmltopdf

相关阅读:
小结笔记：多位管理大师关于管理的要素的论述
博弈论之SG函数
Docker和Docker compose的安装使用指南
SpringCloudAlibaba 微服务讲解（四）Sentinel--服务容错（一）
软件测试缺陷报告---定义，组成，缺陷的生命周期，缺陷跟踪产后处理流程，缺陷跟踪处理流程，缺陷跟踪的目的，缺陷管理工具
浅谈MySQL 索引
Flutter 自签名证书
自动化运维机器人（RPA）在银行IT运维领域应用场景分析
git 常用命令
【改进极限学习机】双向极限学习机（B-ELM）（Matlab代码实现）

原文地址：https://blog.csdn.net/Yuan_xii/article/details/134044758