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

wkhtmltoimage/wkhtmltopdf 使用实践

news 文章来源：https://blog.csdn.net/Yuan_xii/article/details/134044758 2025/5/20 9:13:18

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

C++内存管理：其七、标准库中的allocator

首先明确一点&#xff0c;绝大多数情况下&#xff0c;是标准库中的容器使用allocator。因为容器需要频繁的申请和释放内存。 一、容器使用allocator 典型的例子&#xff1a; vector<int , allocator<int>> a;但是为什么我们通常的定义vector变量的方法是&#x…...

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

【机器学习合集】人脸表情分类任务Pytorch实现TensorBoardX的使用 -＞（个人学习记录笔记）

人脸表情分类任务 注意&#xff1a;整个项目来自阿里云天池&#xff0c;下面是开发人员的联系方式&#xff0c;本人仅作为学习记录&#xff01;&#xff01;&#xff01;该文章原因&#xff0c;学习该项目&#xff0c;完善注释内容&#xff0c;针对新版本的Pytorch进行部分代码…...

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

Maven - 国内 Maven 镜像仓库（加速包，冲冲冲～）

<?xml version"1.0" encoding"UTF-8" ?><!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding…...

编程日记 2023/10/26 21:25:14

【Solidity】智能合约案例——③版权保护合约

目录 一、合约源码分析&#xff1a; 二、合约整体流程&#xff1a; 1.部署合约&#xff1a; 2.添加实体&#xff1a; 3.查询实体 4.审核版权&#xff1a; 5.版权转让 一、合约源码分析&#xff1a; Copyright.sol&#xff1a;主合约&#xff0c;定义了版权局的实体&#xff…...

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

Cisco IOS XE Web UI 命令执行漏洞

Cisco IOS XE Web UI 命令执行漏洞 受影响版本 Cisco IOS XE全版本 漏洞描述 Cisco IOS XE Web UI 是一种基于GUI的嵌入式系统管理工具&#xff0c;能够提供系统配置、简化系统部署和可管理性以及增强用户体验。它带有默认映像&#xff0c;因此无需在系统上启用任何内容或安…...

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

qwen大模型，推理速度慢，单卡/双卡速度慢，flash-attention安装，解决方案

场景 阿里的通义千问qwen大模型&#xff0c;推理速度慢&#xff0c;单卡/双卡速度慢。 详细&#xff1a; 1、今日在使用qwen-14b的float16版本进行推理&#xff08;BF16/FP16) 1.1 在qwen-14b-int4也会有同样的现象 2、使用3090 24G显卡两张 3、模型加载的device是auto&#x…...

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

3.SpringSecurity基于数据库的认证与授权

文章目录 SpringSecurity基于数据库的认证与授权一、自定义用户信息UserDetails1.1 新建用户信息类UserDetails1.2 UserDetailsService 二、基于数据库的认证2.1 连接数据库2.2 获取用户信息2.2.1 获取用户实体类2.2.2 Mapper2.2.3 Service 2.3 认证2.3.1 实现UserDetails接口2…...

编程日记 2023/10/26 21:20:09

【软件测试】自动化测试selenium

目录 一、什么是自动化测试 二、Selenium介绍 1、Selenium是什么 2、Selenium的原理 三、了解Selenium的常用API 1、webDriver API 1.1、元素定位 1.1.1、CSS选择器 1.1.2、Xpath元素定位 1.1.3、面试题 1.2、操作测试对象 1.3、添加等待 1.4、打印信息 1.5、浏…...

编程日记 2023/10/26 21:18:08

​​​​​​​如何解决Google play开发者新注册账号，身份验证的地址证明问题？

我们知道&#xff0c;Google Play应用市场的发展速度惊人&#xff0c;但这两年&#xff0c;为了防止恶意软件的传播&#xff0c;谷歌要求开发者账号需要进行身份验证才能发布应用。 而今年越来越严格&#xff0c;不仅在提审时需要进行电话验证&#xff08;链接&#xff09;&am…...

编程日记 2023/10/26 21:17:06

Gin vs Beego: Golang的Web框架之争

前言 Golang作为一门高效且简洁的语言&#xff0c;已经在Web开发领域得到了广泛的应用。Gin和Beego是Golang中两个著名的Web框架&#xff0c;它们都提供了一系列强大的功能&#xff0c;帮助开发者构建高性能的Web应用。本文将对Gin和Beego进行全面的对比&#xff0c;帮助开发者…...

编程日记 2023/10/26 21:16:05