javascript - 将 PHP 与 Google 图表和表格导出为 PDF

Question

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

我尝试使用

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

对于 google 图表和 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>