1、简介:
wkhtmltopdf,wkhtmltoimage是开源命令行工具,使用Qt WebKit渲染引擎将HTML呈现为PDF和各种图像格式。
官网:
wkhtmltopdf
github:
Issues · wkhtmltopdf/wkhtmltopdf · GitHub
2、前端调试的时候踩过的坑
1、跟后台数据调试的时候,最好是同步页面(数据展示同步渲染出来结果),调用后台方法的时候,后台是执行了命令,直接把当前网页路径转成pdf或者图片,如果是异步请求,数据没有渲染完成,生成的pdf或者图片不完整;
wkhtmltopdf.exe http://www.badiu.com D:\test.pdf
2、如果必须是异步接口,让后台调用的时候,在命令行里面加上延时--javascript-delay 10000,默认是200ms,意思命令行访问url的时候,延时10000毫秒生成pdf或者图片,这样也能解决问题,但是请求时间过长。
wkhtmltopdf.exe --javascript-delay 10000 https://www.baidu.com D:\test.pdf
3、接上条,如果必须是异步请求接口,但是异步请求设置延时时间也不太好,一是请求时间过长体验不好,二是接口请求时间可能会超过你设置的延时时间,那么另外一种思路:
页面异步请求获取数据
在异步数据渲染完毕以后,获取需要生成pdf的网页内容,dom结构,通过js获取,包括dom结构以及样式设置。
调用后台接口,把获取的内容转码,转成base64等传递给后台
前端再另外创建一个页面,同步过去内容,这个时候后台需要把第三步从前端获取的内容,通过同步是形式传递给前端。
后台生成pdf命令的时候,直接写第四步的网页地址。
4、转成pdf或者网页的时候,不支持css3部分样式;不支持新的自定义html标签,例如定义的组件,template等
3、前端快速调试测试工具
前端样式测试的时候,不一定每次都需要调用后台接口,问后台要下java执行的 命令行,自己下载个工具测试。
官网下载工具,地址wkhtmltopdf
下载完成以后安装,记住安装目录
进入安装的bin目录下面,执行命令
进入自定义的安装生成目录,查看pdf或者图片是否跟网页一致
注意生成pdf或者images的时候,生成的后缀一定要写对。
wkhtmltopdf.exe --javascript-delay 10000 https://www.baidu.com D:\test.pdf wkhtmltopdf.exe https://www.baidu.com D:\test.pdf wkhtmltoimage.exe https://www.baidu.com D:\test.jpg
4、常用命令
下面命令行,摘自官网
--no-collate打印多个时不进行整理副本 --cookie-jar <path>读取和写入cookie,提供的cookie jar文件 --copies <number>要打印到pdf中的份数,文件(默认1) -d, - dpi <dpi>显式更改dpi(这没有对基于X11的系统的影响)(默认为96) -H, - extended-help显示更广泛的帮助,详细说明不太常见的命令开关 -g, - grayscale PDF将以灰度生成 -h, - help显示帮助 --htmldoc输出程序html帮助 --image-dpi <integer>当嵌入图像时将它们缩小到 这个dpi(默认为600) --image-quality <integer>当jpeg压缩图像时使用它 质量(默认94) --license输出许可证信息并退出 --log-level <level>将日志级别设置为:none,error,warn或 信息(默认信息) -l, - lowquality生成较低质量的pdf / ps。有用的 缩小结果文档空间 --manpage输出程序手册页 -B, - margin-bottom <unitreal>设置页面底部边距 -L, - margin-left <unitreal>设置页面左边距(默认为10mm) -R, - margin-right <unitreal>设置页面右边距(默认为10mm) -T, - margin-top <unitreal>设置页面上边距 -O, - 方向<orientation>将方向设置为横向或纵向 (默认人像) --page-height <unitreal>页面高度 -s, - page-size <尺寸>将纸张尺寸设置为:A4,Letter等 (默认A4) --page-width <unitreal>页面宽度 --no-pdf-compression不要在pdf上使用无损压缩 对象 -q, - quiet更加冗长,为倒退而维护 兼容性; 与使用--log-level相同 没有 --read-args-from-stdin从stdin读取命令行参数 --readme输出程序自述文件 --title <text>生成的pdf文件的标题(如果没有,则使用第一个文档的标题指定) --use-xserver使用X服务器(一些插件和其他插件)没有X11可能无法正常工作 -V, - version输出版本信息并退出 大纲选项: --dump-default-toc-xsl将默认的TOC xsl样式表转储到标准输出 --dump-outline <file>将大纲转储到文件中 --outline将大纲放入pdf(默认) --no-outline不要在pdf中加入大纲 --outline-depth <level>设置轮廓的深度(默认为4) 页面选项: --allow <path>允许指定的文件要加载的文件夹(可重复) --background打印背景(默认) --no-background不打印背景 --bypass-proxy-for <value>绕过主机代理(可重复) --cache-dir <path> Web缓存目录 --checkbox-checked-svg <path>选中渲染时使用此SVG文件 复选框 --checkbox-svg <path>在未选中呈现时使用此SVG文件复选框 --cookie <name> <value>设置一个额外的cookie(可重复),值应该是url编码的。 --custom-header <name> <value>设置一个额外的HTTP头(可重复) --custom-header-propagation添加指定的HTTP头- 每个资源请求的自定义标头。 --no-custom-header-propagation不添加指定的HTTP头- 每个资源请求的自定义标头。 --debug -javascript显示javascript调试输出 --no-debug-javascript不显示javascript调试输出(默认) --default-header添加一个默认标题,其名称为 页面左侧,页码到 右边,这是: --header左= '[网页]' --header-right ='[page] / [toPage]' - top 2cm --header线 --encoding <encoding>设置输入的默认文本编码 --disable-external-links不要链接到远程网页 --enable-external-links建立到远程网页的链接(默认) --disable-forms不要将HTML表单字段转换为pdf格式 字段(默认) --enable-forms将HTML表单字段转换为pdf表单字段 --images加载或打印图像(默认) --no-images不加载或打印图像 --disable-internal-links不要建立本地链接 --enable-internal-links制作本地链接(默认) -n, - disable-javascript不允许网页运行javascript --enable-javascript允许网页运行javascript (默认) --javascript-delay <msec>等待几毫秒的javascript 完成(默认200) --keep-relative-links将相对外部链接保持为相对 外部链接 --load-error-handling <handler>指定如何处理失败的页面 load:abort,ignore或skip(默认值 中止) --load-media-error-handling <handler>指定如何处理媒体文件 无法加载:中止,忽略或跳过 (默认忽略) --disable-local-file-access不允许转换本地文件 读取其他本地文件,除非 明确允许使用--allow --enable-local-file-access允许将本地文件转换为read 在其他本地文件中。(默认) --minimum-font-size <int>最小字体大小 --exclude-from-outline不要在表格中包含该页面 内容和大纲 --include-in-outline在目录中包含该页面 和轮廓(默认) --page-offset <offset>设置起始页码(默认为0) --password <密码> HTTP验证密码 --disable-plugins禁用已安装的插件(默认) --enable-plugins启用已安装的插件(插件将 可能不起作用) --post <name> <value>添加额外的帖子字段(可重复) --post-file <name> <path>发布一个附加文件(可重复) --print-media-type使用print media-type而不是screen --no-print-media-type不要使用打印介质类型而不是 屏幕(默认) -p, - proxy <proxy>使用代理 --proxy-hostname-lookup使用代理解析主机名 --radiobutton-checked-svg <path>选中渲染时使用此SVG文件 单选按钮 --radiobutton-svg <path>在未选中渲染时使用此SVG文件 单选按钮 --resolve-relative-links将相对外部链接解析为 绝对链接(默认) --run-script <js>运行此附加的javascript后 页面加载完成(可重复) --disable-smart-shrinking禁用智能收缩策略 由WebKit用来制作像素/ dpi 比率无常数 --enable-smart-shrinking启用智能收缩策略 由WebKit用来制作像素/ dpi 比率无常数(默认) --ssl-crt-path <path> ssl客户端证书公钥的路径 OpenSSL PEM格式,可选择后跟 中级ca和可信证书 --ssl-key-password <密码> ssl客户端证书私钥的密码 --ssl-key-path <path> ssl客户端证书私钥的路径 OpenSSL PEM格式 --stop-slow-scripts停止慢速运行javascripts(默认) --no-stop-slow-scripts不要停止慢速运行javascripts --disable-toc-back-links不要从节头到toc链接 (默认) --enable-toc-back-links从节头到toc的链接 --user-style-sheet <url>指定要加载的用户样式表 每一页 --username <username> HTTP身份验证用户名 --viewport-size <>如果您有自定义,则设置视口大小 滚动条或css属性溢出到 模拟窗口大小 --window-status <windowStatus>等到window.status等于this 渲染页面前的字符串 --zoom <float>使用此缩放系数(默认值为1) 页眉和页脚选项: --footer-center <text>居中的页脚文字 --footer-font-name <name>设置页脚字体名称(默认Arial) --footer-font-size <size>设置页脚字体大小(默认为12) --footer -html <url>添加一个html页脚 --footer-left <text>左对齐的页脚文本 - footer-line页脚上方的显示行 --no-footer-line不要在页脚上方显示行 (默认) --footer-right <text>右对齐的页脚文本 --footer-spacing <real>页脚和内容之间的间距,单位为mm (默认为0) --header-center <text>居中的标题文本 --header-font-name <name>设置标题字体名称(默认Arial) --header-font-size <size>设置标题字体大小(默认为12) --header-html <url>添加一个html标题 --header-left <text>左对齐标题文本 --header-line标题下方的显示行 --no-header-line不在标题下方显示行 (默认) --header-right <text>右对齐标题文本 --header-spacing <real>标题和内容之间的间距,单位为mm (默认为0) --replace <name> <value>将[name]替换为header和中的值 页脚(可重复) TOC选项: --disable-dotted-lines不要在toc中使用虚线 --toc-header-text <text> toc的标题文本(默认表 内容) --toc-level-indentation <width>对于toc中的每个标题级别 按此长度缩进(默认为1em) --disable-toc-links不要从toc链接到部分 --toc-text-size-shrink <real>对于toc中每个级别的标题 字体按此因子缩放(默认值 0.8) --xsl-style-sheet <file>使用提供的xsl样式表 打印目录