doumei7420 2017-01-12 11:26
浏览 69

DOMPDF - 在PDF中显示从数据库获取数据的谷歌图表

I am generating a chart using the Google Charts API and the data from my database, which means that there is a call to an external file and data is echoed back in a JSON format. I know that the chart can be converted to an image so I thought that this might work but unfortunately not I have tried the code below:

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var jsonData = $.ajax({
  url: "getData.php?id=<?php echo $user_id; ?>';",
  dataType:"json",
  async: false
  }).responseText;
    var data = new google.visualization.DataTable(jsonData);

   var options = {
        hAxis: {
          title: 'Audit Number'
        },
        vAxis: {
          title: 'Gross Profit %'
        }
      };
    var chart_div = document.getElementById('chart_div');
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

   google.visualization.events.addListener(chart, 'ready', function () {
    var imgUri = chart.getImageURI();
    // do something with the image URI, like:
    document.getElementById('chartImg').src = imgUri;
});

        chart.draw(data, options);

  }

I then call include the graph on the PDF report by

   $rep_table = " <html><img id='chartImg' />

When I load the page in HTML view, it displays the chart but it's still interactive so the first issue is definitely something to do with the conversion of the chart.

The code for generating the report can be seen below

$total = db::c()->query("
        SELECT sum(value) FROM stocktake_allowances WHERE stocktake_id = '{$stocktake_id}' AND customer_id = '".$user_id."';")->fetchColumn(0);        

    $dep_qry = "SELECT
                     category_name AS category_name,allowance_date AS date, SUM(value) AS total_cost
                FROM stocktake_allowances
                ";


    $dep_qry .= " WHERE stocktake_id = '{$stocktake_id}' AND customer_id = '".$user_id."'
                  ";

    $dep_qry .= "
            GROUP BY TRIM(UPPER(category_name))
            ORDER BY category_name, allowance_date ASC";

    //echo $dep_qry;

    $dep_res = db::c()->query($dep_qry);
    $rep_table .= " <html><img id='chartImg' /><img id='chart_div' /><br/><br/><link rel='stylesheet' href='./index/style.css' type='text/css'>  <table class='st_det_rep' >
                             <tr>
                                 <td style='width:80%; text-align:center; font-size:30px;'>
                                  <img src='index/EasyCountio.png' alt='EasyCount.io' height='61' width='280'/><br/><br/><br/><br/>
                                     <strong>Wastage Summary</strong><br/>

                                 </td>

                            </tr>
                         </table>";          
    $rep_table .= "
                 <table id='stock_detail_report' cellspacing='0' style='margin-top:10px;'>
                     <tr>
                         <td class='top' style='width:30%;'><div class='nosplit'>Wastage Category</div></td>
                         <td class='top' style='width:15%;'><div class='nosplit'>Ref. No.</div></td>
                         <td class='top' style='width:15%;'><div class='nosplit'>Value</div></td>

                     </tr>";
    $sum_total_cost = 0;
    $sum_total_retail = 0;
    $sum_total_qty = 0;
    $counter = 1;
    $j=0;

     while ($row = $dep_res->fetch(PDO::FETCH_ASSOC))
    {        
        $total_cost = $row['total_cost'];//$row['unit_cost_price']*$row['qty'];
        $catName = $row['category_name'];
        $sum_total_cost += $total_cost;

        $date = date("d-M-y", strtotime($row['date']));
        $tc = number_format($total_cost, 2);

        if(!($j%2)) {
        $cssClass = 'odd';
         } else {
            $cssClass = 'even';
         }
         $j++;


        $rep_table .= "<tr>
                       <td style='text-align:right;'><div class='nosplit'>".$catName."</div></td>
                       <td style='text-align:right;'><div class='nosplit'>".$counter."</div></td>
                       <td style='text-align:right;'><div class='nosplit'>&#8364;".$total_cost."</div></td>


                    </tr>";                
        $counter++;
    }

    $stc = number_format($sum_total_cost, 2);

    $rep_table .= "<tr>
                    <td class='bottom' colspan = '2'><div class='nosplit'>Total Wastage:</div></td>

                    <td class='bottom'><div class='nosplit'>&#8364;".$stc."</div></td>
                </tr>
            </table>";

     $dompdf = new Dompdf();
     $dompdf->loadHtml($rep_table);

    // // (Optional) Setup the paper size and orientation
     $dompdf->setPaper('A4', 'l');

    // // Render the HTML as PDF
     $dompdf->render();

    // // Output the generated PDF to Browser
     $dompdf->stream("Allowances Summary.pdf", array("Attachment" => false));

The bigger issue is with including the graph on the report. When I try to generate the PDF report I get an error saying that the headers have already been sent. I used one of the tips on SO to find out what the problem is and this is what I got back:

/home/arturl/public_html/platform/class/class_report.php
21

Which corresponds to

 url: "getData.php?id=<?php echo $user_id; ?>';",

This makes perfect sense as the json string is echoed back and DOMPDF sees it as a header. Is there any other way to get this done?

  • 写回答

1条回答 默认 最新

  • doushou1298 2017-01-12 12:51
    关注

    when you say...

    When I load the page in HTML view, it displays the chart but it's still interactive

    it sounds like you want replace the chart with it's image

    see following snippet...

    var chart_div = document.getElementById('chart_div');
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    
    google.visualization.events.addListener(chart, 'ready', function () {
      chart_div.innerHTML = '<img alt="chart" src="' + chart.getImageURI() + '" />';
    });
    

    EDIT

    so i think it should flow like this...

    3 pages --

    1. html page for chart
    2. getData.php
    3. buildPDF.php

    html page calls getData.php and draws the chart

    then when the 'ready' event fires, sends the image uri via ajax to buildPDF.php

    google.visualization.events.addListener(chart, 'ready', function () {
      var imageURI = chart.getImageURI();
      chart_div.innerHTML = '<img alt="chart" src="' + imageURI + '" />';
    
      // send chart image
      $.ajax({
        type: 'POST',
        url: 'buildPDF.php',
        data: {
          'chartImage': imageURI,
        },
        success: function() {
          console.log('image sent');
        }
      });
    });
    

    then in buildPDF.php...

    $rep_table .= " <html><img src='".$_POST['chartImage']."' />"
    
    评论

报告相同问题?

悬赏问题

  • ¥15 BP神经网络控制倒立摆
  • ¥20 要这个数学建模编程的代码 并且能完整允许出来结果 完整的过程和数据的结果
  • ¥15 html5+css和javascript有人可以帮吗?图片要怎么插入代码里面啊
  • ¥30 Unity接入微信SDK 无法开启摄像头
  • ¥20 有偿 写代码 要用特定的软件anaconda 里的jvpyter 用python3写
  • ¥20 cad图纸,chx-3六轴码垛机器人
  • ¥15 移动摄像头专网需要解vlan
  • ¥20 access多表提取相同字段数据并合并
  • ¥20 基于MSP430f5529的MPU6050驱动,求出欧拉角
  • ¥20 Java-Oj-桌布的计算