DOMPDF - 在PDF中显示谷歌图表,其中数据来自数据库

时间:2017-01-12 11:26:27

标签: php json pdf charts dompdf

我使用Google Charts API和数据库中的数据生成图表,这意味着调用外部文件,数据以JSON格式回显。我知道图表可以转换为图像,所以我认为这可能有效,但不幸的是我没有尝试过以下代码:

  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);

  }

然后我通过

调用PDF图表中的图表
   $rep_table = " <html><img id='chartImg' />

当我在HTML视图中加载页面时,它会显示图表,但它仍然是交互式的,因此第一个问题肯定与图表的转换有关。

生成报告的代码可以在下面看到

$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));

更大的问题是在报告中包含图表。当我尝试生成PDF报告时,我收到错误消息,表明标题已经发送过。我使用SO上的一个提示来找出问题所在,这就是我得到的:

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

对应

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

这很有意义,因为json字符串被回显,DOMPDF将其视为标题。还有其他方法可以完成这项工作吗?

1 个答案:

答案 0 :(得分:1)

当你说...

当我在HTML视图中加载页面时,它会显示图表,但它仍然是交互式的

听起来你想要用它的图像替换图表

请参阅以下摘录...

<?php session_start(); ?>

<div  class="container-fluid bg_color8">
    <div class="row alignT">
        <form action="login.php"  method="post">
            <div class="col-sm-4">
                <p> <span >User Name:</span>  <input  type="text" name="euname" id="euname" placeholder="username"></p>
            </div>

            <div class="col-sm-4">
                <p> <span >Password:</span>  <input type="password" name="eupassword" id="eupassword" placeholder="**********"></p>
            </div>

            <input name="submit" type="submit" class="btn btn-info col-sm-2" value="Log In"  >
            <?php if (!empty($_SESSION['message'])) { ?>
                <br><label id='message'><?= $_SESSION['message'] ?></label>
            <?php } ?>
        </form>
    </div>
</div>
<?php unset($_SESSION['message']); ?>

编辑

所以我认为它应该像这样......

3页 -

  1. 图表的html页面
  2. getData.php
  3. buildPDF.php
  4. html页面调用 getData.php 并绘制图表

    然后当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() + '" />'; }); 事件触发时,将图像uri通过ajax发送到 buildPDF.php

    'ready'

    然后在 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');
        }
      });
    });