在我的Laravel 5项目中,我使用Lavacharts(由谷歌图表提供支持)来显示图表,并使用dompdf包装器Laravel-dompdf来生成PDF文件。
是否可以使用dompdf导出此类图表?如果可以,如何实现?
据推测,我必须首先将图表保存为图像,但这并不是一个真正的选项,因为保存图像是通过Javascript完成的,而生成PDF的所有工作都是在后端(PHP)完成的。
Dompdf无法处理页面上基于JavaScript的内容。你有两个选择:
- 在浏览器中预览图表,并将图像版本发送到服务器进行渲染
- 使用无头浏览器(如PhantomJS)将HTML(带JavaScript)渲染为PDF
关于第二种选择,我没有太多要说的,但关于第一种。。。
谷歌图表API可以生成你的图表的PNG版本。SO上有很多关于如何将PNG转换为PHP代码的帖子(搜索一下)。
以下内容可能有效:
<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',
};
var chart_div = document.getElementById('chart_div');
var chart_input = document.getElementById('chart_input');
var chart = new google.visualization.ColumnChart(chart_div);
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
chart_input.value = chart.getImageURI();
});
chart.draw(data, options);
}
</script>
<div id='chart_div'></div>
<form method="post" action="print_chart.php">
<input type="hidden" name="chartImg" id="chartImg">
<button type="submit">print</button>
</form>
GoogleCharts使用dompdf支持的数据uri来渲染PNG。一旦你在服务器端有了PNG,你就可以把它插入img标签:
$html = '<img src="' . $_POST['chart_input'] . '">';
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream('chart.pdf');