官网:https://wkhtmltopdf.org/downloads.html
Github:https://github.com/wkhtmltopdf/packaging/releases/
添加环境变量
D:\Program Files\wkhtmltopdf\bin
本地HTML导出
wkhtmltopdf D:\html\test.html D:\html\test.pdf
注意
本地导出的时候引用的外部css和js并不会生效,要保证js和css都在html内。
导出在线网页
wkhtmltopdf https://www.psvmc.cn/ D:\html\test2.pdf
wkhtmltopdf https://www.baidu.com/ D:\html\test3.pdf
wkhtmltopdf https://www.psvmc.cn/zjtools/z/qrcode/index.html D:\html\test4.pdf
wkhtmltopdf https://www.psvmc.cn/zjtools/z/browserinfo/index.html D:\html\test5.pdf
注意
animation: false,
如下的方式是行不通的
本来想不支持Flex,只要使用JS来兼容Flex,但是实际测试是行不通的。
JS中判断引用JS
<script type="text/javascript">
var supportsFlex = CSS.supports("display", "flex");
if(!supportsFlex){
var flex_element = document.createElement("script");
flex_element.setAttribute("type", "text/javascript");
flex_element.setAttribute("src", "https://unpkg.com/flex-native@1.2.0/dist/flex.native.min.js");
document.body.appendChild(flex_element);
}
</script>
Java:https://github.com/jhonnymertz/java-wkhtmltopdf-wrapper
NodeJS:https://github.com/devongovett/node-wkhtmltopdf
C#:https://github.com/codaxy/wkhtmltopdf
GO:https://github.com/SebastiaanKlippert/go-wkhtmltopdf
Python:https://github.com/JazzCore/python-pdfkit
JS里也提供了Window.CSS.supports()
方法,用来检查浏览器对css3属性是否支持:
使用两个参数:一个是属性名,另一个是属性值 。
var supportsFlex = CSS.supports("display", "flex");
REM
//判断是否支持rem单位
var supportsRem = CSS.supports("width","1rem");
@supports ( display: flex ) {
body {
display: flex;
}
}
其它语法
/* 支持Flex布局 */
@supports (display: flex) {}
/* 不支持Flex布局 */
@supports not (display: flex) {}
/* 同时支持Flex布局和Grid布局 */
@supports (display: flex) and (display: grid) {}
/* 支持Flex布局或者支持Grid布局 */
@supports (display: flex) or (display: grid) {}
@supports (display: flex) and (display: grid) and (gap: 0) {}
但是wkhtmltopdf不支持这种方式。
https://github.com/skin2skin/flex-native/blob/master/README-zh_CN.md
在普通的HTML中使用
<script src="https://unpkg.com/flex-native@1.2.0/dist/flex.native.min.js"></script>
在模块化中使用
import('flex-native');
使用时请在CSS中的任何display: flex
声明之前添加一个 -js-display: flex
声明, 或在构建过程中使用PostCSS Flexibility自动添加-js前缀。
CSS中
.wrapper{
-js-display:flex;
display:flex;
align-items:center;
justify-content:center;
}
元素上
<div style='display:flex;align-items:center' />