wkhtmltoimagewkhtmltopdf 使用实践,会使用电脑学习实践计划

2023-10-26 10:04:35 终极管理员知识笔记 90阅读

1. 介绍

wkhtmltopdf/wkhtmltoimage 用于将简单的html页面转换为pdf或图片

2.安装

downloads

wkhtmltoimagewkhtmltopdf 使用实践,会使用电脑学习实践计划

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 langen><head><meta charsetutf-8><script src    .reportGraph {width:900px}</style></head><body><div classreportGraph><canvas idcanvas></canvas></div><script typetext/javascript>// wkhtmltopdf 0.12.5 crash fix.//  strict;(function(setLineDash) {    CanvasRenderingContext2D.prototype.setLineDash  function() {        if(!arguments[0].length){            arguments[0]  [1,0];        }        // Now, call the original method        return 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的一层简单封装, 因此我们需要先安装好wkhtmltopdfpip 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

标签：