我画了谷歌图表。现在，我想把按钮以pdf格式保存图表。我从这里看Save google charts as pdf以及堆栈中可用的其他问题，但它不起作用。
通过已使用的谷歌图表打印png图像，但它只是打开一个带有png图像的新选项卡，但它不会为用户打开另存为pdf窗口。
有谁知道有办法吗？
答案 0 :(得分：7)
您可以使用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>
答案 1 :(得分：1)
您可以使用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，并将其存储在images文件夹中，然后检索图像和内容。
使用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();
}
?>