How to export google chart in pdf?

前端未结

关注

 2  843

I have draw google chart. Now, I want to put button to save the chart in pdf format. I do look from here Save google charts as pdf and other questions available in stack but

相关标签:

2条回答

我在风中等你

2020-12-29 01:09

You can use Mpdf to create pdf of google chart with store images,

Step 1. create.php

Use google method chart.getImageURI() to get image url then store into the variable after using jquery to submit form.

      <html>
      <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <script type="text/javascript">
          google.charts.load("current", {packages:['corechart']});
          google.charts.setOnLoadCallback(drawChart);
          function drawChart() {

            var data = google.visualization.arrayToDataTable([
              ['Element', 'Density', { role: 'style' }],
              ['Copper', 8.94, '#b87333', ],
              ['Silver', 10.49, 'silver'],
              ['Gold', 19.30, 'gold'],
              ['Platinum', 21.45, 'color: #e5e4e2' ]
            ]);

            var options = {
              title: "Density of Precious Metals, in g/cm^3",
              bar: {groupWidth: '95%'},
              legend: 'none',
            };
        // google chart 1
             var g_chart_1 = document.getElementById('g_chart_1');
             var g_chart_1 = new google.visualization.ColumnChart(g_chart_1);
                g_chart_1.draw(data, options);

            var chart_div = document.getElementById('chart_div');
            var chart = new google.visualization.ColumnChart(chart_div);

            google.visualization.events.addListener(chart, 'ready', function () {
             chart_div.innerHTML = '<img style="display:none" src="' + chart.getImageURI() + '" class="img-responsive">';
             console.log(chart_div.innerHTML);
            });

            chart.draw(data, options);

        // google chart 2
        var g_chart_2 = document.getElementById('g_chart_2');
              var g_chart_2 = new google.visualization.LineChart(g_chart_2);
        g_chart_2.draw(data, options);

        var chart_div1 = document.getElementById('chart_div1');
            var chart1 = new google.visualization.LineChart(chart_div1);
            google.visualization.events.addListener(chart1, 'ready', function () {

              chart_div1.innerHTML = '<img style="display:none" src="' + chart1.getImageURI() + '" class="img-responsive">';

              console.log(chart_div1.innerHTML);
            });

            chart1.draw(data, options);

        }
        </script>

      <div class="container" id="Chart_details">
          <div id='chart_div'></div><div id='g_chart_1'></div>
          <div id='chart_div1'></div><div id='g_chart_2'></div>
      </div>
          <div align="center">
             <form method="post" id="new_pdf" action="createchartpdf.php">
              <input type="hidden" name="hidden_div_html" id="hidden_div_html" />
              <button type="button" name="create_pdf" id="create_pdf" class="btn btn-danger btn-xs">Create PDF</button>
             </form>
            </div>

      <script>
      $(document).ready(function(){
       $('#create_pdf').click(function(){
        $('#hidden_div_html').val($('#Chart_details').html());
        $('#new_pdf').submit();
       });
      });
      </script>

      </body>
      </html>

step 2. createchartpdf.php

Get HTML data to get images url and store into the images folder, and then retrieve images and content.

print into pdf using mpdf. This is work with live server to print images.

        <?php

        if(isset($_POST["hidden_div_html"]) && $_POST["hidden_div_html"] != '')
        {

            $html = $_POST["hidden_div_html"];
            $doc = new DOMDocument();
            @$doc->loadHTML($html);
            $tags = $doc->getElementsByTagName('img');
            $i=1;
            $result='';
            foreach ($tags as $tag) {
                $file_name = 'images/google_chart'.$i.'.png';
                    $img_Src=$tag->getAttribute('src');
                        file_put_contents($file_name, file_get_contents($img_Src));
                $res= '<img src="images/google_chart'.$i.'.png">';
                $result.=$res;
              $i++;
            }

            //include make_pdf
            include("mpdf60/mpdf.php");
            $mpdf=new mPDF();

            $mpdf->allow_charset_conversion = true;
            $mpdf->SetDisplayMode('fullpage');

            $mpdf->list_indent_first_level = 0; // 1 or 0 - whether to indent the first level of a list
            $mpdf->WriteHTML($result);
            $mpdf->Output();
        }

        ?>

0 讨论(0)

面向向阳花

2020-12-29 01:25

you can use jsPDF to create a PDF

use method addImage to add the chart's image uri to the pdf

see following working snippet...

google.charts.load('current', {
  packages: ['controls', 'corechart', 'table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'y0');
  data.addRows([
    [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
    [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
    [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
    [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
    [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
    [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
    [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
    [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
    [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
    [66, 70], [67, 72], [68, 75], [69, 80]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  var btnSave = document.getElementById('save-pdf');

  google.visualization.events.addListener(chart, 'ready', function () {
    btnSave.disabled = false;
  });

  btnSave.addEventListener('click', function () {
    var doc = new jsPDF();
    doc.addImage(chart.getImageURI(), 0, 0);
    doc.save('chart.pdf');
  }, false);

  chart.draw(data, {
    chartArea: {
      bottom: 24,
      left: 36,
      right: 12,
      top: 48,
      width: '100%',
      height: '100%'
    },
    height: 600,
    title: 'chart title',
    width: 600
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<input id="save-pdf" type="button" value="Save as PDF" disabled />
<div id="chart_div"></div>

0 讨论(0)