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

wkhtmltoimage/wkhtmltopdf 使用实践

news 2026/3/26 13:57:24

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

注CO2驱替煤层气THM耦合模型与自定义PDE耦合固体力学

注co2驱替煤层气THM耦合模型 自定义pde耦合固体力学今天&#xff0c;我来分享一下关于CO2驱替煤层气的THM&#xff08;热-水-力学&#xff09;耦合模型的构建过程。这个模型听起来有点复杂&#xff0c;但其实拆开来理解&#xff0c;每一步都还挺有意思的。尤其是其中涉及的自定…...

编程新知 2026/3/26 13:24:57

Qwen2.5-VL-7B-Instruct实战教程：如何将截图中的UI设计精准还原为可运行HTML+CSS

Qwen2.5-VL-7B-Instruct实战教程&#xff1a;如何将截图中的UI设计精准还原为可运行HTMLCSS 1. 工具简介与环境准备 Qwen2.5-VL-7B-Instruct是一个专门针对RTX 4090显卡优化的多模态大模型工具&#xff0c;它能看懂图片内容并生成相应的代码。想象一下&#xff0c;你只需要给…...

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

信创云渲染能支持远程设计与异地协同吗？

在信创推进深化的当下&#xff0c;企业对远程设计、异地协同的需求愈发迫切&#xff0c;传统本地工作站既难以适配国产软硬件环境&#xff0c;也无法满足跨地域高效协作需求。信创云渲染作为核心解决方案&#xff0c;能否同时支撑远程设计与异地协同&#xff1f;答案是肯定的&a…...

编程新知 2026/3/26 11:17:48

基于动态三维环境下的Q-Learning算法无人机自主避障路径规划研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程新知 2026/3/26 10:37:23

突破局限：开源微信插件WeChatExtension-ForMac革新体验全解析

突破局限&#xff1a;开源微信插件WeChatExtension-ForMac革新体验全解析 【免费下载链接】WeChatExtension-ForMac Mac微信功能拓展/微信插件/微信小助手(A plugin for Mac WeChat) 项目地址: https://gitcode.com/gh_mirrors/we/WeChatExtension-ForMac 作为Mac用户&a…...

编程新知 2026/3/26 9:40:56

如何免费获取Microsoft Word APA第7版参考文献格式：完整安装指南

如何免费获取Microsoft Word APA第7版参考文献格式&#xff1a;完整安装指南 【免费下载链接】APA-7th-Edition Microsoft Word XSD for generating APA 7th edition references 项目地址: https://gitcode.com/gh_mirrors/ap/APA-7th-Edition 还在为学术论文的参考文献…...

编程新知 2026/3/26 8:58:40

SUPER COLORIZER 数据库集成实践：MySQL管理海量图像处理任务与结果

SUPER COLORIZER 数据库集成实践&#xff1a;MySQL管理海量图像处理任务与结果 如果你正在管理一个需要批量处理成千上万张图片的项目&#xff0c;比如给老照片上色、统一调整产品图风格&#xff0c;或者为电商平台批量生成不同尺寸的图片&#xff0c;那你肯定遇到过这样的烦恼…...

编程新知 2026/3/26 8:40:35

5步搞定OpenClaw+Qwen3-32B：RTX4090D镜像一键接入实战

5步搞定OpenClawQwen3-32B&#xff1a;RTX4090D镜像一键接入实战 1. 为什么选择云端沙盒方案 当我第一次听说OpenClaw这个开源自动化框架时&#xff0c;内心既兴奋又忐忑。作为一个喜欢折腾新技术的开发者&#xff0c;我迫不及待想尝试这个能像人类一样操作电脑的AI助手。但看…...

编程新知 2026/3/26 7:22:20

WuliArt Qwen-Image Turbo新手教程：Prompt怎么写？效果不好怎么调？

WuliArt Qwen-Image Turbo新手教程&#xff1a;Prompt怎么写&#xff1f;效果不好怎么调&#xff1f; 刚接触WuliArt Qwen-Image Turbo&#xff0c;是不是感觉有点懵&#xff1f;看着那个简洁的输入框&#xff0c;心里琢磨着&#xff1a;“我该写点啥才能让它画出我想要的图&a…...

编程新知 2026/3/26 7:00:04

深入解析Bluetooth AVDTP协议：音频/视频传输的核心机制

1. 蓝牙AVDTP协议初探&#xff1a;音频视频传输的幕后英雄 每次用蓝牙耳机听音乐或看视频时&#xff0c;你可能没意识到背后有个"隐形交通警察"在指挥数据流动。这个默默工作的角色就是AVDTP协议&#xff08;Audio/Video Distribution Transport Protocol&#xff09…...

编程新知 2026/3/26 6:25:35