web-dev-qa-db-fra.com

Comment exporter un graphique google en pdf?

J'ai dessiner un graphique google. Maintenant, je veux mettre un bouton pour enregistrer le graphique au format pdf. Je regarde d'ici Enregistrer les graphiques Google en pdf et d'autres questions disponibles dans la pile, mais cela ne fonctionne pas.

Imprimer l'image png par google chart déjà utilisé mais il suffit d'ouvrir un nouvel onglet avec l'image png mais il n'ouvre pas la fenêtre d'enregistrement au format pdf pour l'utilisateur.

Quelqu'un sait-il comment le faire?

pdfchartsgoogle-visualizationpygooglechart
6
joun

vous pouvez utiliser jsPDF pour créer un PDF

utilisez la méthode addImage pour ajouter l'URI de l'image du graphique au pdf

voir l'extrait de travail suivant ...

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

Vous pouvez utiliser Mpdf pour créer un pdf de google chart avec des images de magasin,

Étape 1. create.php

Utilisez la méthode google chart.getImageURI () pour obtenir l'url de l'image, puis stockez-la dans la variable après avoir utilisé jquery pour soumettre le formulaire.

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

étape 2. createchartpdf.php

Obtenez des données HTML pour obtenir l'url des images et les stocker dans le dossier images, puis récupérez les images et le contenu.

imprimer en pdf en utilisant mpdf. Cela fonctionne avec un serveur en direct pour imprimer des 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();
        }

        ?>
1
Ghanshyam Nakiya