如何導出PDF格式的谷歌圖表？

Question

我畫了谷歌圖表。現在，我想把按鈕保存爲PDF格式的圖表。我從這裏看，Save google charts as pdf和其他可用的堆棧問題，但它不起作用。

打印png圖片的谷歌圖表已經使用，但它只是打開一個新的選項卡與PNG圖像，但它並沒有打開用戶的PDF窗口保存。

有沒有人知道任何方式來做到這一點？

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>