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

8 篇文章 0 订阅
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>


                          <!-- 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就真正完美了。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值