将带有 Google 图表和表格的 PHP 导出为 PDF

Question

我有一个 PHP 页面，其中包含 Google 图表和下面的表格，需要导出为 PDF。

我尝试使用

var doc = new jsPDF();
        doc.addImage(chart.getImageURI(), 0,0);
        doc.save('chart.pdf');

对于谷歌图表和表格的 dompdf，但显然当同时使用这两个代码时它不起作用。

有没有办法将页面作为一个整体导出，或者图表的 PDF 页面和表格的第二个页面都在同一个 PDF 文件中？

Answer 1

您可以使用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>