將帶有 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>