DOMPDF-在PDF中显示Google图表，其中从数据库获取数据

Question

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. 我正在使用Google Charts API和数据库中的数据生成图表，这意味着存在对外部文件的调用，并且数据以JSON格式回显。 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 然后，我称该图包含在PDF报告中，

   $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. 当我在HTML视图中加载页面时，它会显示图表，但是它仍然是交互式的，因此第一个问题肯定与图表的转换有关。

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. 当我尝试生成PDF报告时，出现错误消息，说明标题已发送。 I used one of the tips on SO to find out what the problem is and this is what I got back: 我使用了SO的技巧之一来找出问题所在，这就是我得到的回报：

/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. 由于回显了json字符串，并且DOMPDF将其视为标头，因此这非常合理。 Is there any other way to get this done? 还有其他方法可以做到这一点吗？

Answer 1

when you say... 当你说...

When I load the page in HTML view, it displays the chart but it's still interactive 当我在HTML视图中加载页面时，它会显示图表，但仍是交互式的

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 -- 3页-

html page for chart 图表的html页面
getData.php getData.php
buildPDF.php buildPDF.php

html page calls getData.php and draws the chart html页面调用getData.php并绘制图表

then when the 'ready' event fires, sends the image uri via ajax to buildPDF.php 然后，当'ready'事件触发时，通过ajax将图像uri发送到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 ... 然后在buildPDF.php中 ...

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

DOMPDF-在PDF中显示Google图表，其中从数据库获取数据

问题描述

1 个解决方案

解决方案1
1 2017-01-12 12:51:29

DOMPDF-在PDF中显示Google图表，其中从数据库获取数据

问题描述

1 个解决方案

解决方案1 1 2017-01-12 12:51:29

解决方案1
1 2017-01-12 12:51:29