HTML导出为PDF
安装wkhtmltopdf
官网：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注意
- 导出在线网页的时候，外部引用的JS和CSS是生效的，但是页面不能有渐渐显示的动画，因为导出的是页面刚加载完的状态。
- 不支持页面后来加载的数据
- 不支持Flex布局
- 不支持vw和vh
- 不支持JS更改页面样式
- Echarts也要取消动画效果
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
小知识
判断是否支持Flex
JS中判断
JS里也提供了Window.CSS.supports()方法，用来检查浏览器对css3属性是否支持：
使用两个参数：一个是属性名，另一个是属性值 。
var supportsFlex = CSS.supports("display", "flex");REM
//判断是否支持rem单位
var supportsRem = CSS.supports("width","1rem");CSS中判断
@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) {}支持Flex
但是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' />