wkhtmltopdf 水印 背景_wkhtmltopdf + echarts 转 PDF

演示效果:

遇到的问题

wkhtmltopdf生成pdf echarts 不显示

百度的结果：

问题很简单：

1、echarts 写在jquery的onload里，jquery的$(function(){});方法没有执行，也没多研究，把echarts 放到页面最下方，去掉onload方法。

2、显示echarts的div要设置一个高度和宽度，注意都要设置，浏览器不设置宽度能看到图，但是生成pdf不行。

3、加上参数 --javascript-delay 3000。

4、echarts 设置 animation:false，如果延迟时间够长应该不设置也可以。

最后处理的方法

wkhtmltopdf --disable-smart-shrinking index.html index.pdf

# 禁止使用WebKit的智能战略收缩，使像素/ DPI比没有不变

部署到 linux上的问题

安装的前需要安装下面两个程序

yum install xorg-x11-fonts-75dpi

yum install xorg-x11-fonts-Type1

rpm安装

rpm -iv wkhtmltox-0.12.6-1.centos7.x86_64.rpm

1、中文乱码

复制C:\Windows\Fonts\simsun.ttc(宋体)

上传到服务器 /usr/share/fonts/chinese/TrueType/simsun.ttc

2、图表不显示

因为代码里面使用到了let语法，通过 --debug-javascript 调试发现了，是解析let语法报错，改成var就可以了

var dimensionIndex = [];

for (let index in conclusions){

dimensionIndex.push(conclusions[index].dimensionIndex);

}

html代码

.box {

min-height: 100vh;

padding: 3.125rem;

}

.topData {

display: flex;

flex-direction: column;

color: green;

}

.userName {

font-size: 1.75rem;

padding-bottom: 0.625rem

}

.text1 {

font-size: 1.5rem;

}