如何以pdf格式导出Google图表? [英] How to export google chart in pdf?

问题描述

我已经绘制了Google图表.现在，我想点击按钮以pdf格式保存图表.我确实从这里查看将google图表另存为pdf 和其他可用堆栈的问题，但这不起作用.

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 it doesn't work.

通过已使用的Google图表打印png图像，但是它只是打开带有png图像的新标签，但没有为用户打开另存为pdf"窗口.

Print png image by google chart already used but it just open a new tab with the png image but it doesnt open the save as pdf window for user.

有人知道有什么方法吗?

Do anyone knows any ways to do it?

推荐答案

，您可以使用 jsPDF 创建PDF

you can use jsPDF to create a PDF

使用方法addImage将图表的图像uri添加到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>

这篇关于如何以pdf格式导出Google图表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！