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;

}

#myChart {

margin-left: 6.25rem;

}

.dataList {

margin-top: 6.25rem;

}

.data {

margin-bottom: 2.5rem;

}

.dataTitle {

font-size: 1.5rem;

color: green;

}

.text2 {

font-size: 1.125rem

}

时刻在奔跑

测试结果

JAVA技术能力

分数2.69(1-10)

多线程 :

基本掌握

JVM :

基本了解

Spring :

基本会用

//

var myChart = echarts.init(document.getElementById("myChart"));

var conclusions = [{"dimension":{"createTime":"2020-08-20 11:42:00","updateTime":null,"modelDimensionId":1,"modelId":1,"parentId":0,"dimensionId":2,"weight":0.2,"dimensionName":"JAVA","dimension":{"createTime":"2020-08-11 09:21:22","updateTime":"2020-08-21 01:34:50","dimensionId":2,"parentId":0,"level":1,"intervalLower":5.0,"intervalUpper":9.1,"intervalAvg":7.0,"name":"\u793E\u4EA4\u80FD\u529B","weight":null}},"dimensionScore":26.07,"dimensionIndex":2.69},{"dimension":{"createTime":"2020-08-20 11:51:17","updateTime":"2020-08-20 12:29:44","modelDimensionId":2,"modelId":1,"parentId":0,"dimensionId":3,"weight":0.56,"dimensionName":"HTML","dimension":{"createTime":"2020-08-11 09:21:52","updateTime":"2020-08-11 09:21:54","dimensionId":3,"parentId":0,"level":1,"intervalLower":5.0,"intervalUpper":8.9,"intervalAvg":6.65,"name":"\u8BA4\u771F\u8D1F\u8D23","weight":null}},"dimensionScore":27.39,"dimensionIndex":2.43},{"dimension":{"createTime":"2020-08-20 12:14:09","updateTime":"2020-08-20 12:22:52","modelDimensionId":4,"modelId":1,"parentId":0,"dimensionId":4,"weight":0.23,"dimensionName":"PHP","dimension":{"createTime":"2020-08-11 09:22:38","updateTime":"2020-08-11 09:22:40","dimensionId":4,"parentId":0,"level":1,"intervalLower":4.0,"intervalUpper":5.3,"intervalAvg":8.6,"name":"\u5BA2\u6237\u5BFC\u5411","weight":null}},"dimensionScore":23.75,"dimensionIndex":3.62},{"dimension":{"createTime":"2020-08-20 12:23:15","updateTime":null,"modelDimensionId":5,"modelId":1,"parentId":0,"dimensionId":5,"weight":0.67,"dimensionName":"JavaScript","dimension":{"createTime":"2020-08-11 09:22:57","updateTime":"2020-08-11 09:23:00","dimensionId":5,"parentId":0,"level":1,"intervalLower":5.0,"intervalUpper":5.2,"intervalAvg":9.1,"name":"\u76EE\u6807\u7BA1\u7406","weight":null}},"dimensionScore":27.72,"dimensionIndex":3.28},{"dimension":{"createTime":"2020-08-21 02:10:50","updateTime":null,"modelDimensionId":6,"modelId":1,"parentId":0,"dimensionId":6,"weight":0.45,"dimensionName":"Python","dimension":{"createTime":"2020-08-11 09:23:19","updateTime":"2020-08-11 09:23:20","dimensionId":6,"parentId":0,"level":1,"intervalLower":4.0,"intervalUpper":5.1,"intervalAvg":8.8,"name":"\u5B66\u4E60\u80FD\u529B","weight":null}},"dimensionScore":28.71,"dimensionIndex":3.06},{"dimension":{"createTime":"2020-08-21 02:10:58","updateTime":null,"modelDimensionId":7,"modelId":1,"parentId":0,"dimensionId":7,"weight":0.23,"dimensionName":"Go","dimension":{"createTime":"2020-08-11 09:23:29","updateTime":"2020-08-11 09:23:30","dimensionId":7,"parentId":0,"level":1,"intervalLower":3.0,"intervalUpper":5.1,"intervalAvg":8.5,"name":"\u9886\u5BFC\u8BF4\u670D","weight":null}},"dimensionScore":26.07,"dimensionIndex":3.26}];

var dimensionIndex = [];

for (var index in conclusions){

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

}

console.log(dimensionIndex)

var option = {

// title: {

// text: '基础雷达图'

// },

animation: false,

// series: { }

tooltip: {},

legend: {

data: []

},

radar: {

// shape: 'circle',

name: {

textStyle: {

color: "#000",

backgroundColor: "#fff",

borderRadius: 3,

padding: [3, 5]

}

},

indicator: [

{ name: conclusions[0].dimension.dimensionName, max: 10 },

{ name: conclusions[1].dimension.dimensionName, max: 10 },

{ name: conclusions[2].dimension.dimensionName, max: 10 },

{ name: conclusions[3].dimension.dimensionName, max: 10 },

{ name: conclusions[4].dimension.dimensionName, max: 10 },

{ name: conclusions[5].dimension.dimensionName, max: 10 }

]

},

series: [

{

name:"",

// name: '预算 vs 开销(Budget vs spending)',

type: "radar",

// areaStyle: {normal: {}},

data: [

{

// value: this.value

value: dimensionIndex

}

],

itemStyle:{

normal:{

label:{

show:true,

}

}

}

}

]

}

myChart.setOption(option);

var image = myChart.getImage();

console.log()

//]]>

wkhtmltopdf 命令

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