问题一:
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>
<!-- FontAwesome Styles-->
<link href="/assets/css/font-awesome.min.css" rel="stylesheet">
<link href="/assets/css/font-awesome.css" rel="stylesheet" />
<!-- Morris Chart Styles-->
<!-- Custom Styles-->
<link href="/assets/css/custom-styles.css" rel="stylesheet" />
<link rel="stylesheet" href="/assets/js/Lightweight-Chart/cssCharts.css">
<!-- multiple-select -->
<link href="/assets/css/multiple-select.css" rel="stylesheet" />
<style type="text/css">
body{
background:#ffffff;
}
</style>
</head>
'.$ReportContent;
这样完美的html拼接完成。然后就是调用wkhtmltopdf命令
shell_exec("wkhtmltopdf --page-size A3 {$reportUrl} {$filename}");
这样我认为可以了。但是下载下来的pdf还是有问题,就是柱状图最右边部分显示不全。
然后我就又去查手册看国外的论坛。后来我测试的时候不行在php执行xshell的时候,我就拿到命令行去执行,具体哪个命令可以让图显示全。
页面宽度一开始解决不了,后来我决定改变纸张类型,因为默认是A4纸大小打印pdf,我就把他设置成A3的。
shell_exec("wkhtmltopdf --page-size A3 {$reportUrl} {$filename}");
这样生成的pdf就真正完美了。