wkhtmltopdf 将highcharts的页面转为pdf 图表加载不上问题或者图标显示不全问题解决

最新推荐文章于 2021-12-07 10:32:35 发布

菜鸟啊啊啊啊21

最新推荐文章于 2021-12-07 10:32:35 发布

阅读量6.6k

点赞数 1

分类专栏： javascript json php 文章标签： pdf jquery

本文链接：https://blog.csdn.net/qq422431474/article/details/68924667

版权

php 同时被 3 个专栏收录

74 篇文章 0 订阅

订阅专栏

javascript

8 篇文章 0 订阅

订阅专栏

json

2 篇文章 0 订阅

订阅专栏

问题一：

highcharts加载不上，是因为highcharts有画图的那个动作，所以需要去掉那个动作，具体代码如下。

plotOptions: {
pie: {
size:'80%',
allowPointSelect: true,
showInLegend: true,
cursor: 'pointer',
dataLabels: {
distance: -10,
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
},
series: { enableMouseTracking: false, shadow: false, animation: false }
},

红色为关键代码。。

这个问题解决后，但是又产生了一个新的问题就是。当加载了数据以后，柱状图的X轴加载不上，当时就找问题是出在哪里。是什么导致的。

就一步一步的测试，比如是不是php运行转pdf的时候才有问题，这样就去命令行去执行，结果效果一样。然后再去找别的原因。最后经过无数次试验，发现。当页面加载带有js代码的时候就会导致柱状图的x轴加载不上。

所以初步思路是将页面的js代码用正则匹配去掉，只留下引入的外部js文件。因为直接将带有svg标签的图标是没问题的。

然后就开始做。后来写的时候发现不用正则，直接将关键部分的html代码放到一个大的div里面，将这个div设置为display:none;

这样所以的html都看不到。然后再加一个form表单，隐藏域。将隐藏的htm内容赋值到隐藏域，这样form提交给后台就是完整的不带js代码的html内容。

然后后端在去处理html内容，再给该html加上css样式。拼接上

$ReportContent=$_POST['report'];
//保存报表临时页面
$ReportContent='<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link href="/assets/css/bootstrap.css" rel="stylesheet" />
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="/assets/css/jquery.dataTables.css" rel="stylesheet">


<link href="/assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="/assets/css/daterangepicker-bs3.css" />
<script type="text/javascript" src="/assets/js/moment.js"></script>


<link href="/assets/css/font-awesome.min.css" rel="stylesheet">
<link href="/assets/css/font-awesome.css" rel="stylesheet" />


<link href="/assets/css/custom-styles.css" rel="stylesheet" />
<link rel="stylesheet" href="/assets/js/Lightweight-Chart/cssCharts.css">

<link href="/assets/css/multiple-select.css" rel="stylesheet" />
<style type="text/css">
body{
background:#ffffff;
}
</style>
</head>
'.$ReportContent;