如何在一个 PDF 文件中导出两个数据表

Question

我目前正在使用 DataTables 在网页中绘制表格。我有一个没有隐藏的表，用户可以毫无问题地查看它。另一方面，我有一个隐藏的表，它必须与未隐藏的表同时导出。

我希望能够单击未隐藏表中的“导出 PDF”并生成包含两个表的 PDF 文件，即隐藏表和未隐藏表。

有人可以帮我吗？我对如何做到这一点有点困惑。

Answer 1

我没有尝试过，但您可以尝试简单地从第一个按钮触发第二个按钮。

$("#foo .buttons-pdf").on("click", function() {
  $("#bar .buttons-pdf").trigger("click");
});

第二个表仍然需要在 DOM 中可用。

Answer 2

如果你有相同的表，那很容易。只需拥有仅用于导出目的的第三个（或第四个等）隐藏表。单击“PDF”按钮时，请按照以下步骤操作：

1. 事先将*_wrapper 容器设置为display: none;，这样用户就不会在屏幕上看到闪烁或垃圾
2. 使用 API 从所有表中收集数据并合并它们
3. 初始化隐藏导出表并将合并后的数据作为data源
4. 以编程方式触发 PDF 导出
5. 清理隐藏的导出表，以免用户再次尝试导出时发生冲突

===

$('#example').DataTable({ });
$('#example2').DataTable({ });

$('button').on('click', function() {
  var data = $('#example').DataTable().table().data();
  $.merge( data, $('#example2').DataTable().table().data() );
  $('#export-table').DataTable({
    dom: 'B',
    data: data,
    buttons: [{
      extend: 'pdfHtml5'
    }],
    drawCallback: function() {
      $('#export-table_wrapper .buttons-pdf').click()
       setTimeout(function() {
          $('#export-table').DataTable().destroy(false);
       }, 200)
    }
  })
})  

这是一个演示，其中包含一个可见表、一个隐藏表和第三个负责导出的表 -> https://jsfiddle.net/u20x4be0/