如何以 pdf 格式导出 google 图表？

Question

我画了 google 图表。现在，我想放置按钮以 pdf 格式保存图表。我确实从这里和堆栈中可用的其他问题看，但它不起作用。

已使用 google 图表打印 png 图像，但它只是打开一个带有 png 图像的新选项卡，但不会为用户打开另存为 pdf window。

有谁知道有什么办法吗？

Answer 1

您可以使用 jsPDF 创建 PDF

使用方法 addImage 将图表的图像 uri 添加到 pdf

请参阅以下工作片段...

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>

Answer 2

您可以使用 Mpdf 创建带有商店图片的 google 图表的 pdf，

步骤 1。create.php

使用google方法chart.getImageURI()获取图像url然后在使用jquery提交表单后存储到变量中。

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

第 2 步。createchartpdf.php

获取HTML数据以获取图像url并存储到图像文件夹中，然后检索图像和内容。

使用 mpdf 打印成 pdf。这是与实时服务器一起打印图像。

        <?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();
        }

        ?>

如何以 pdf 格式导出 google 图表？

How to export google chart in pdf?

pdf

charts

google-visualization

pygooglechart