如何在一个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 :
- 事先将
*_wrapper
容器设置为display: none;
,这样用户就不会在屏幕上看到闪烁或垃圾 - 使用API从所有表中收集数据并将其合并
- 初始化隐藏的导出表,并将合并的数据用作
data
源 - 以编程方式触发PDF导出
- 清理隐藏的导出表,以便在用户尝试第二次导出时不会发生冲突
- Beforehand, set the
*_wrapper
container todisplay: none;
so the user never sees flicker or garbage on the screen - Use the API to collect data from all tables and merge them
- Initialise the hidden export table and use the merged data as
data
source - Trigger the PDF export programmatically
- 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屋!