您的位置：首页 > Web前端 > HTML

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

2017-03-31 14:50 811 查看
问题一：

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

plotOptions: {

                    pie: {

                        size:'80%',

                        allowPointSelect: true,

                        showInLegend: true,

                        cursor: 'pointer',

                        dataLabels: {

                        distance: -10,

                 
4000
          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就真正完美了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航