仅打印选定的元素/页面答案

【问题标题】：Print only selected elements/pages仅打印选定的元素/页面
【发布时间】：2013-07-16 18:08:31
【问题描述】：

我有一个使用 C# MVC3 开发的页面。这是一份多员工报告。生成的页面将为每个记录/员工提供一个复选框。这个想法是让用户选中他们想要打印的每条记录旁边的框。当他们单击页面上的“打印”按钮时，只会打印那些选定的记录。我怎样才能做到这一点？

【问题讨论】：

标签： javascript jquery css asp.net-mvc-3 c#-4.0

【解决方案1】：

使用 Javascript 添加/删除将在打印过程中隐藏内容的类。这是jsFiddle 的示例。

编辑：为获得最大支持，请包含单独的样式表，而不是使用媒体查询。

<link rel="stylesheet" media="print" href="/print.css" type="text/css" />

HTML

<input type="checkbox" value="a" name="a"/> A |
<input type="checkbox" value="b" name="b"/> B |
<input type="checkbox" value="c" name="c"/> C

<div id="a" class="no-print">Content A</div>
<div id="b" class="no-print">Content B</div>
<div id="c" class="no-print">Content C</div>

CSS

@media print { 
    .no-print { display: none; }
}

/* For Styles */
div {
    background: #CCC;
    padding: 5px;
    margin: 5px;
}

.no-print {
    opacity: 0.5;
}

jQuery

$('input[type="checkbox"]').click(function() {
    if ($(this).is(':checked')) {
        $("#"+ $(this).attr('value')).removeClass('no-print');
    } else {
        $("#"+ $(this).attr('value')).addClass('no-print');
    }
});

【讨论】：

谢谢你。我在我的页面上实现了分页。那么如何打印跨页面选择的记录
我假设它是一个 Javascript 分页。只需使用 css 删除分页。这是print stylesheets 的一个很好的教程。
其实分页已经用C#MVC实现了
在这种情况下，我建议要么将它们全部包含在同一页面上，要么将表单提交到服务器并返回“打印”页面。
我正在使用布局页面和容器。分页将成为容器的一部分。想知道，我可以在布局页面中有一个
吗？当用户选择一条记录时，它将被添加到布局页面中的
中，当用户单击打印按钮时，我可以将容器内的
替换为布局页面中的
。