如何在一个PDF文件中导出两个DataTable [英] How to export two DataTables in just one PDF file

问题描述

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

I'm currently using DataTables to draw tables in a webpage. I have a table which is not hidden and users can view it without problems. On the other hand, I have a hidden table which has to be exported with the not hidden table at same time.

我希望能够在未隐藏的表中单击导出PDF"，并生成包含两个表(已隐藏和未隐藏的表)的PDF文件.

有人可以帮我吗?我对如何做到这一点感到困惑.

Could someone help me? I'm a little confused about how to do that.

推荐答案

如果您有相同的表，那就太容易了.只需拥有仅用于导出目的的第三个(或第四个等)隐藏表即可.单击"PDF"按钮时，请按照以下步骤操作:

If you have identical tables it is dead easy. Simply have a third (or fourth etc) hidden table you only use for export purposes. When your "PDF" button is clicked follow these steps :

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

1. Beforehand, set the *_wrapper container to display: none; so the user never sees flicker or garbage on the screen
2. Use the API to collect data from all tables and merge them
3. Initialise the hidden export table and use the merged data as data source
4. Trigger the PDF export programmatically
5. Clean up the hidden export table so no conflicts occurs when the user tries to export a second time

===

$('#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)
    }
  })
})  

这里是一个演示，其中有一个可见表，一个隐藏表和第三个表负责导出->

Here is a demo with one visible table, one hidden table and a third table which takes care of the export -> https://jsfiddle.net/u20x4be0/

这篇关于如何在一个PDF文件中导出两个DataTable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！