我有一个包含 Google 图表的 PHP 页面以及其下方的表格,需要将其导出为 PDF。
我尝试使用
var doc = new jsPDF();
doc.addImage(chart.getImageURI(), 0,0);
doc.save('chart.pdf');
对于 google 图表和 dompdf 对于表格,但显然当同时使用这两个代码时它不起作用。
最佳答案
您可以使用html2canvas要获取整个页面的图像,
然后将其发送为 pdf...
只需确保图表和表格都已绘制完成即可。
请参阅以下工作片段...
$(document).ready(function() {
google.charts.load('current', {
packages: ['corechart', 'table']
}).then(function () {
var data = new google.visualization.arrayToDataTable([
['x', 'y0', 'y1'],
['0-10', -3, 3],
['11-20', -2.5, 2.5],
['21-30', -2, 2],
['31-40', -1.5, 1.5],
]);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
var chartReady = false;
var table = new google.visualization.Table(document.getElementById('table_div'));
var tableReady = false;
google.visualization.events.addListener(chart, 'ready', onChartReady);
google.visualization.events.addListener(table, 'ready', onTableReady);
chart.draw(data, {
hAxis: {
format: '#,##0.000',
ticks: [
{v: -8, f: '8.000'},
{v: -6, f: '6.000'},
{v: -4, f: '4.000'},
{v: -2, f: '2.000'},
0, 2, 4, 6, 8
]
},
isStacked: true
});
table.draw(data);
function onChartReady() {
chartReady = true;
onIsReady();
}
function onTableReady() {
tableReady = true;
onIsReady();
}
function onIsReady() {
if ((chartReady) && (tableReady)) { html2canvas($('#dashboard_div').get(0)).then(function(canvas) {
// export pdf
var pdfDoc = new jsPDF({
orientation: 'landscape',
unit: 'px',
format: [canvas.width, canvas.height]
});
pdfDoc.addImage(canvas.toDataURL('image/png'), 0, 0);
pdfDoc.save('page.pdf');
});
}
}
});
});
.table {
text-align: center;
}
#table_div {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf@1.5.3/dist/jspdf.min.js"></script>
<div id="dashboard_div">
<div id="chart_div"></div>
<div class="table">
<div id="table_div"></div>
</div>
</div>
关于javascript - 将 PHP 与 Google 图表和表格导出为 PDF,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58975785/