提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

HTML导出为PDF

导出PDFHTML
2023-06-13 09:14:08 时间

安装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' />

相关文章