javascript - 仅打印选定的元素/页面

Question

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

Answer 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');
    }
});