HTML导出为PDF

2022-10-27 15:13:24 浏览数 (2)

安装wkhtmltopdf

官网：https://wkhtmltopdf.org/downloads.html

Github：https://github.com/wkhtmltopdf/packaging/releases/

添加环境变量

代码语言：javascript复制
D:Program Fileswkhtmltopdfbin

本地HTML导出

代码语言：javascript复制
wkhtmltopdf D:htmltest.html D:htmltest.pdf

注意

本地导出的时候引用的外部css和js并不会生效，要保证js和css都在html内。

导出在线网页

代码语言：javascript复制
wkhtmltopdf https://www.psvmc.cn/ D:htmltest2.pdf
wkhtmltopdf https://www.baidu.com/ D:htmltest3.pdf
wkhtmltopdf https://www.psvmc.cn/zjtools/z/qrcode/index.html D:htmltest4.pdf
wkhtmltopdf https://www.psvmc.cn/zjtools/z/browserinfo/index.html D:htmltest5.pdf

注意

  • 导出在线网页的时候，外部引用的JS和CSS是生效的，但是页面不能有渐渐显示的动画，因为导出的是页面刚加载完的状态。
  • 不支持页面后来加载的数据
  • 不支持Flex布局
  • 不支持vw和vh
  • 不支持JS更改页面样式
  • Echarts也要取消动画效果 animation: false,

如下的方式是行不通的

本来想不支持Flex，只要使用JS来兼容Flex，但是实际测试是行不通的。

JS中判断引用JS

代码语言：javascript复制
<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属性是否支持：

使用两个参数：一个是属性名，另一个是属性值 。

代码语言：javascript复制
var supportsFlex = CSS.supports("display", "flex");

REM

代码语言：javascript复制
//判断是否支持rem单位
var supportsRem = CSS.supports("width","1rem");

CSS中判断

代码语言：javascript复制
@supports ( display: flex ) {
  body {
    display: flex;
  }
}

其它语法

代码语言：javascript复制
/* 支持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中使用

代码语言：javascript复制
<script src="https://unpkg.com/flex-native@1.2.0/dist/flex.native.min.js"></script>

在模块化中使用

代码语言：javascript复制
import('flex-native');

使用时请在CSS中的任何display: flex声明之前添加一个 -js-display: flex声明， 或在构建过程中使用PostCSS Flexibility自动添加-js前缀。

CSS中

代码语言：javascript复制
.wrapper{
  -js-display:flex;
  display:flex;
  align-items:center;
  justify-content:center;
}

元素上

代码语言：javascript复制
<div style='display:flex;align-items:center' />
css html display flex wkhtmltopdf

0 人点赞