设计风格好看的网站,做网站制作的摘要,新手入门网站建设书籍,免费网页域名申请1. 介绍
wkhtmltopdf/wkhtmltoimage 用于将简单的html页面转换为pdf或图片#xff1b;
2.安装
downloads
2.1. mac os
下载64-bit 版本然后按照指示安装, 遇到 untrust developers 时#xff0c;需要在 Settings - Privacy 处信任下该安装包。
2.2. debian
# 可用…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 wkhtmltopdf3. 使用
wkhtmltopdfwkhtmltoimage 内嵌了一个QT浏览器其原理是会使用该内嵌的浏览器打开html文件或链接然后对该网页进行截图处理
注意事项 (1) 导出的图片或pdf空白由于wkhtmltopdfwkhtmltoimage 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 langen
head
meta charsetutf-8
script srchttps://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js/script
style.reportGraph {width:900px}
/style
/head
bodydiv classreportGraphcanvas idcanvas/canvas/divscript typetext/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
/htmlwkhtmltoimage --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 imgkitimport imgkit
# html 是整个index.html文件的字符串
imgkit --from_string(html, output_path/tmp/xxx.jpg, options{
no-stop-slow-scripts: ,
javascript-delay: 1000
})Reference
wkhtmltoimagewkhtmltopdf
