【发布时间】：2019-11-20 00:07:04
【问题描述】：
【问题讨论】：
标签： javascript jquery datatables
【发布时间】：2019-11-20 00:07:04
【问题描述】：
对我来说，更深入地修改 DOM（添加额外隐藏的 <span> 节点，使其内容保持最新，并在打印时切换具有原始 <select> 节点的内容的可见性）而不是使用实际的 DataTables 数据是远离 DataTables API。
我可能建议改为通过extending Print 按钮的默认行为自定义打印窗口：
$('table').DataTable({
...
buttons: [
...
{
extend: 'print',
customize: function(win){
/* prepare whatever printing page you like */
}
}
]
})
从customize 选项回调中，您可以将表格的数据抓取到变量中，并制作另一个适合在打印窗口中打印的DataTable() (win)。
适合在这里打印我的意思是你可以去掉交互元素（搜索栏、按钮、分页控件等）并替换用户输入元素，如 <select> 或 <input> 为它们对应的值。例如。因此，可打印版本设置可能包含：
$('table').DataTable({
...
dom: 't',
paging: false,
order: []
})
您应该记住的一件事是，每当用户与原始表格中的 <select> 元素进行交互时，您必须将这些更改提交到基础数据（稍后将用于打印)，比如：
$('table').on('change', 'tbody select', function(e){
dataTable.cell($(this).closest('td')).data($(this).val());
});
您可以在下面找到此方法的完整演示（由于实时 sn-p 安全策略，它无法打开打印窗口，您可以参考此codepen 或将 JS 和 HTML 克隆到您当地的环境）。
$(document).ready(() => {
const dataTable = $('table').DataTable({
dom: 'Bt',
data: [{opt: '', val: 'valueA'}, {opt: '', val: 'valueB'}, {opt: '', val: 'valueC'}],
columns: [{
title: 'Options',
data: 'opt',
render: data => '<select>'+['','Option1','Option2','Option3'].reduce((options,option) => options+=`<option value="${option}" ${option == data ? 'selected' : ''}>${option}</option>`,'')+'</select>'
}, {
title: 'Value',
data: 'val'
}
],
buttons: [{
extend:'print',
customize: function(win){
const tableData = $('table').DataTable().data();
$(win.document.body).html('<table></table>');
$(win.document).ready(() => {
$(win.document.body).find('table').DataTable({
dom: 't',
data: tableData,
paging: 'false',
order: [],
columns: [
{title: 'Options', data: 'opt'},
{title: 'Value', data: 'val'}
]
})
})
}
}]
});
$('table').on('change', 'tbody select', function(e){
dataTable.cell($(this).closest('td')).data($(this).val());
});
})<!doctype html><html><head><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script><script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script><script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script> </head><body><table></table></body></html>ps我无法建议相关代码，因为您没有发布任何代码，但是，我想这个概念听起来很清楚，所以您可以轻松地将其部署到您的项目中 p>
【讨论】：
首先浏览器不要尝试打印选择选项，而只打印选择的选项，这意味着您的打印 CSS 有问题，或者您没有使用本机功能。
如果您不想解决上述问题，下面的帖子提供了一种处理您的问题的方法。
How to use print.css to make a select look like normal text
在坚果壳中：
第 1 步：在 select 旁边创建一个 span 元素
第 2 步：在变量发生变化时保持 span 对象的更新
第 3 步：在您的打印 css 中保持选择隐藏。仅使用@media 打印
第 4 步：在你的屏幕 css 中保持 span 隐藏。仅使用@media 屏幕
享受并请阅读原始答案。
谢谢
【讨论】：
方法一：
尝试保持选择框的默认值为空白。
方法二：
您可以保留与select-box 值绑定的隐藏text-box，并使用媒体查询在打印时显示和隐藏文本框。
@media print
{
input.hidden{display:block;}
select.language-box{display:none;}
}
方法三：
还有这个可能有帮助的活动
<body onbeforeprint="myFunction()">
虽然对这个事件的支持并不明确。 https://www.w3schools.com/tags/ev_onbeforeprint.asp
希望能回答你的问题:)
【讨论】：