当前位置：首页 > news >正文

wkhtmltoimage/wkhtmltopdf 使用实践

news 2025/7/7 0:23:00

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 methodreturn 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

wkhtmltoimage/wkhtmltopdf 使用实践

1. 介绍

2.安装

2.1. mac os

2.2. debian

3. 使用

3.1. eCharts Example

3.2. python 使用

Reference

相关文章：

wkhtmltoimage/wkhtmltopdf 使用实践

Rclone连接Onedrive

RK356X/RK3588构建Ubuntu20.04根文件系统

本地新建项目如何推到码云上去

RSAUtil 前端 JavaScript JSEncrypt 实现 RSA (长文本)加密解密

uniapp map polygons 区域填充色（fillColor）在ios显示正常，但在安卓手机显示是黑色的,怎么解决？

OSCAR数据库上锁问题如何排查

FPGA与人工智能泛谈-01

【VASP】POTCAR文件

棒球俱乐部青少年成长体系·棒球1号位

折叠式菜单怎么做编程，初学编程系统化教程初级1上线

与AI对话，如何写好prompt？

基于YOLOv8模型和UA-DETRAC数据集的车辆目标检测系统（PyTorch+Pyside6+YOLOv8模型）

0037【Edabit ★☆☆☆☆☆】【修改Bug 2】Buggy Code (Part 2)

【算法中的Java】— 判断语句

【单例模式】饿汉式，懒汉式？JAVA如何实现单例？线程安全吗？

Spark_SQL-DataFrame数据写出以及读写数据库（以MySQl为例）

Linux进程终止

0036【Edabit ★☆☆☆☆☆】【让我加油】Let‘s Fuel Up!

React 中常用的几种路由跳转方式

【磁盘】每天掌握一个Linux命令 - iostat

OkHttp 中实现断点续传 demo

视频字幕质量评估的大规模细粒度基准

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

css3笔记（1）自用

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

音视频——I2S 协议详解

DingDing机器人群消息推送

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险