Question

我有一个带有选择输入和一个打印按钮的数据表，而在打印时我正在获取所有选择选项标签文本如何解决？

Answer 1

对我来说，更深入地修改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>或{{ 1}}及其相应的值。例如。因此，可打印版本设置可能包含：

<input>

应记住的一件事是，每当用户与原始表中的$('table').DataTable({ ... dom: 't', paging: false, order: [] })元素进行交互时，您必须将这些更改提交到基础数据（将用于打印）稍后），例如：

<select>

您可以在下面找到此方法的演示（由于实时代码段安全策略，它无法打开打印窗口，您可以参考此codepen或将JS和HTML都克隆到您的本地环境）。

$('table').on('change', 'tbody select', function(e){
    dataTable.cell($(this).closest('td')).data($(this).val());  
});

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

ps 我不建议相关代码，因为您没有发布任何代码，但是我想这个概念很明确，因此您可以轻松地将其部署在项目中

Answer 2

首先，首先浏览器不要尝试打印选择选项，而仅打印选择的选项，这意味着您的打印CSS出了问题，或者您没有使用本机功能。

如果您不想解决上述问题，则下面的文章提供了一种解决问题的方法。

How to use print.css to make a select look like normal text

在坚果壳中：

第1步：在select旁边创建一个span元素
步骤2：在变量更改的情况下保持span对象更新
第3步：在打印CSS中保持选择隐藏。仅使用@media打印
第4步：在屏幕上的CSS保持跨度隐藏。仅使用@media屏幕

享受，请阅读原始答案。

谢谢

Answer 3

方法1：

尝试将选择框的默认值保留为空白。

方法2：

您可以保留与text-box值绑定的隐藏select-box，并在打印时使用媒体查询来显示和隐藏文本框。

@media print 
{
   input.hidden{display:block;}
   select.language-box{display:none;}
}

方法3：

此事件可能也有帮助

<body onbeforeprint="myFunction()">

尽管尚不清楚对此事件的支持。 https://www.w3schools.com/tags/ev_onbeforeprint.asp

希望能回答您的问题：）

带有选择输入和打印选项按钮的数据表

3 个答案: