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

wkhtmltoimage/wkhtmltopdf 使用实践

news 2026/3/26 15:35:36

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. 介绍 wkhtmltopdf/wkhtmltoimage 用于将简单的html页面转换为pdf或图片&#xff1b; 2.安装 downloads 2.1. mac os 下载64-bit 版本然后按照指示安装, 遇到 untrust developers 时&#xff0c;需要在 Settings -> Privacy 处信任下该安装包。 2.2. debian # 可用…...

编程日记 2023/10/26 21:49:41

Rclone连接Onedrive

一、Rclone介绍 Rclone是一款的命令行工具&#xff0c;支持在不同对象存储、网盘间同步、上传、下载数据。 我们这里连接的onedrive&#xff0c;其他网盘请查看官方文档。 注意&#xff1a; 需要先在Windows下配置好了&#xff0c;然后再将rclone配置文件复制到Linux的rclone配…...

编程日记 2023/10/26 21:48:40

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

文章目录 前言一、官网下载ubuntu-base二、挂载并构建文件系统2.1、配置构建文件系统环境2.2、编写挂载脚本mount.sh并安装相关工具2.3、轻量级的桌面环境 lubuntu-desktop2.4、卸载一些不必要的软件2.5、添加用户2.6 、允许root用户登录桌面2.7、串口自动登录2.8、添加分区释放…...

编程日记 2023/10/26 21:47:39

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

1.先在码云上建立一个空仓库&#xff0c;正常步骤就行。建立完成有readme.md. 2.然后本地建立项目文件&#xff0c;正常脚手架搭建VUE\REACT等。记得要项目git init一下。 3.本地改好的内容commit 一下。 4.本地文件与远端仓库建立连接。git remote add origin https://gite…...

编程日记 2023/10/26 21:46:38

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

文章归档&#xff1a;https://www.yuque.com/u27599042/coding_star/cl4dl599pdmtllw1 依赖 import JSEncrypt from ‘jsencrypt’ pnpm i jsencryptimport {stringIsNull} from “/utils/string_utils.js”&#xff1a;https://www.yuque.com/u27599042/coding_star/slncupw…...

编程日记 2023/10/26 21:44:36

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

uniapp map polygons 区域填充色&#xff08;fillColor&#xff09;在ios显示正常&#xff0c;但在安卓手机显示是黑色的,怎么解决&#xff1f; <MapPage :longitude"item.centerCoord[0]" :latitude"item.centerCoord[1]":polygons"[{ points: it…...

编程日记 2023/10/26 21:43:35

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

关键字 oscar lock 问题描述 oscar 数据库上锁问题如何排查 解决问题思路 准备数据 create table lock_test(name varchar(10),age varchar(10));insert into lock_test values(ff,10); insert into lock_test values(yy,20); insert into lock_test values(ll,30);sessio…...

编程日记 2023/10/26 21:42:34

FPGA与人工智能泛谈-01

文章目录 前言一、FPGA(Field Programmable Gate Array)是什么？二、与GPU的对比1.GPU特点2. FPGA的优势三、人工智能实现的基础架构总结前言 人工智能技术的快速发展正从各个方面改变人类的生活、工作及教育等各个方面，其中人工智能算法的演进又是其中的关键一步，其中会涉及…...

编程日记 2023/10/26 21:41:33

【VASP】POTCAR文件

【VASP】POTCAR文件 POTCAR 文件的介绍qvasp 生成POTCARvaspkit 生成POTCAR再来认识一下各种赝势如何区分US、PAW、LDA、GGA、PW91 前言 一、4个常用的输入文件INCAR、POSCAR、POTCAR、KPOINTS INCAR: 计算任务类型是什么&#xff1f;怎么计算&#xff1f; KPOINTS: 包含了倒易…...

编程日记 2023/10/26 21:40:32

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

棒球俱乐部青少年成长体系介绍 1. 培养理念 简要介绍棒球俱乐部的宗旨和培养青少年的目标 棒球俱乐部是一个致力于培养青少年棒球运动员的体育组织&#xff0c;其宗旨是通过提供专业的棒球训练和比赛机会&#xff0c;帮助青少年提高身体素质、培养团队合作精神和塑造积极向上…...

编程日记 2023/10/26 21:39:31

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

中文编程系统化教程&#xff0c;不需英语基础&#xff0c;学习链接——入门篇课程 https://edu.csdn.net/course/detail/39036中文编程系统化教程&#xff0c;不需英语基础&#xff0c;学习链接—— 初级1课程 https://edu.csdn.net/course/detail/39061 ——————————…...

编程日记 2023/10/26 21:38:30

与AI对话，如何写好prompt？

玩转AIGC&#xff0c;优质的Prompt提示词实在是太重要了&#xff01;同样的问题&#xff0c;换一个问法&#xff0c;就会得到差别迥异的答案。你是怎样和AI进行对话交流的呢&#xff1f;我来分享几个&#xff1a; 请告诉我…我想知道…对于…你有什么看法&#xff1f;帮我解决…...

编程日记 2023/10/26 21:37:29

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

摘要&#xff1a;基于YOLOv8模型和UA-DETRAC数据集的车辆目标检测系统可用于日常生活中检测与定位汽车&#xff08;car&#xff09;、公共汽车&#xff08;bus&#xff09;、面包车&#xff08;vans&#xff09;等目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方…...

编程日记 2023/10/26 21:36:28

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

0037【Edabit ★☆☆☆☆☆】【修改Bug 2】Buggy Code (Part 2) bugs language_fundamentals Instructions Fix the code in the code tab to pass this challenge (only syntax errors). Look at the examples below to get an idea of what the function should do. Exampl…...

编程日记 2023/10/26 21:35:27

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

&#x1f4d2;博客首页&#xff1a;Sonesang的博客 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; ❤️ &#xff1a;热爱Java与算法学习&#xff0c;期待一起交流&#xff01; &#x1f64f;作者水平很有限&#xff0c;如果发现错误&#xf…...

编程日记 2023/10/26 21:34:26

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

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 单例设计模式 Java单例设计模式 Java单例设计模…...

编程日记 2023/10/26 21:33:24

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

一、数据写出 &#xff08;1&#xff09;SparkSQL统一API写出DataFrame数据 二、写出MySQL数据库 一、数据写出 &#xff08;1&#xff09;SparkSQL统一API写出DataFrame数据 统一API写法&#xff1a; 常见源写出&#xff1a; # cording:utf8from pyspark.sql import SparkSes…...

编程日记 2023/10/26 21:32:23

Linux进程终止

文章目录 进程退出场景进程退出码strerrorerrno浅谈进程异常exit && _exit 进程退出场景 代码运行完毕&#xff0c;结果正确代码运行完毕&#xff0c;结果不正确代码异常 进程退出码 我们写的C/C的代码&#xff0c;main函数每次都需要返回0&#xff0c;而这个return…...

编程日记 2023/10/26 21:31:22

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

0036【Edabit ★☆☆☆☆☆】【让我加油 】Let’s Fuel Up! control_flow language_fundamentals numbers Instructions A vehicle needs 10 times the amount of fuel than the distance it travels. However, it must always carry a minimum of 100 fuel before setting o…...

编程日记 2023/10/26 21:30:21

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

目录 一、push跳转 1、Link组件&#xff1a; 二、replace跳转 三、goBack跳转&#xff08;回退&#xff09; 四、goForward跳转&#xff08;前进&#xff09; 五、 go跳转&#xff08;向前或向后跳转指定步数&#xff09; 一、push跳转 1、Link组件&#xff1a; 可以在不刷新…...

编程日记 2023/10/26 21:28:19

实战解析：基于防火墙与三层交换机的企业多业务VLAN安全组网

1. 企业多业务VLAN组网的核心价值 对于200-500人规模的中型企业来说&#xff0c;网络架构就像城市的交通系统。当办公区、研发中心、视频监控、服务器集群等业务单元都挤在同一个"马路"上时&#xff0c;网络拥堵和安全风险就会成为日常噩梦。我去年就遇到过一家制造…...

编程新知 2026/3/26 13:51:01

三步掌握MidScene：AI浏览器自动化的零代码实战指南

三步掌握MidScene&#xff1a;AI浏览器自动化的零代码实战指南 【免费下载链接】midscene Let AI be your browser operator. 项目地址: https://gitcode.com/GitHub_Trending/mid/midscene MidScene是一款革命性的AI驱动浏览器自动化工具&#xff0c;让您能够通过自然语…...

编程新知 2026/3/26 12:22:32

Qwen3-0.6B-FP8企业级部署教程：基于Dify打造AI应用平台

Qwen3-0.6B-FP8企业级部署教程&#xff1a;基于Dify打造AI应用平台 想快速搭建一个属于自己或团队的AI应用&#xff0c;但又觉得从零开发太复杂&#xff1f;今天&#xff0c;我们就来聊聊如何用Qwen3-0.6B-FP8这个轻量高效的模型&#xff0c;结合Dify这个强大的AI应用开发平台…...

编程新知 2026/3/26 11:07:38

虚拟手柄技术深度剖析：ViGEmBus内核级输入模拟架构解析

虚拟手柄技术深度剖析&#xff1a;ViGEmBus内核级输入模拟架构解析 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 在游戏开发与输入设备兼容性领域&#xf…...

编程新知 2026/3/26 9:28:53

抖音无水印下载器：3步解决内容创作者的批量获取难题

抖音无水印下载器&#xff1a;3步解决内容创作者的批量获取难题 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 你是否曾为了研究竞品内容&#xff0c;手动复制粘贴数十个抖音链接&#xff0c;结果半天时间只…...

编程新知 2026/3/26 9:16:47

GTE文本向量模型部署全攻略：从零到一搭建企业级文本处理服务

GTE文本向量模型部署全攻略&#xff1a;从零到一搭建企业级文本处理服务 1. 项目介绍与核心价值 如果你正在寻找一个能一站式解决中文文本分析难题的工具&#xff0c;那么GTE文本向量模型可能就是你的答案。想象一下&#xff0c;一个模型就能帮你识别文档里的关键人物、地点&…...

编程新知 2026/3/26 8:28:31

为什么你的asyncio服务内存永不释放？深入CPython asyncio循环引用链，给出4行补丁级解决方案！

第一章&#xff1a;Shell脚本的基本语法和命令Shell脚本是Linux/Unix系统自动化任务的核心工具&#xff0c;以可执行文本文件形式存在&#xff0c;由Bash等Shell解释器逐行解析执行。其语法简洁但严谨&#xff0c;强调空格、换行与引号的正确使用。脚本结构与执行方式 每个Shel…...

编程新知 2026/3/26 8:08:28

嵌入式系统的实时性能优化详解

嵌入式系统的实时性能优化详解 实时系统概述 实时系统是指能够在规定的时间内完成特定任务的系统&#xff0c;其正确性不仅取决于计算结果的正确性&#xff0c;还取决于结果产生的时间。在嵌入式系统中&#xff0c;实时性能优化至关重要。 实时系统分类 硬实时系统&#xf…...

编程新知 2026/3/26 8:08:28

FSCalendar深度链接集成指南：从URL直接打开指定日期的终极解决方案

FSCalendar深度链接集成指南&#xff1a;从URL直接打开指定日期的终极解决方案 【免费下载链接】FSCalendar 项目地址: https://gitcode.com/gh_mirrors/fsc/FSCalendar FSCalendar是一款功能强大的iOS日历组件&#xff0c;支持高度自定义和流畅的用户体验。在移动应用…...

编程新知 2026/3/26 5:40:43

施密特触发器除了整形还能干啥？聊聊它在Arduino按键消抖和信号调理里的妙用

施密特触发器在Arduino中的高阶应用&#xff1a;从按键消抖到信号调理的实战指南 当你在调试Arduino项目时&#xff0c;是否遇到过按键响应不稳定、传感器读数跳变的问题&#xff1f;这些看似简单的硬件问题&#xff0c;往往会让开发者花费大量时间在软件滤波上。实际上&#x…...

编程新知 2026/3/26 4:35:42