我在这里有以下示例（简单）HTML文件http://jsfiddle.net/WhupP/2/
该页面包含4个主要区域header，left-column，righ-column和footer。
此外，它还包含2个@media元素screen和print。
当我打印页面时，@ media screen {...}样式只接听电话并打印整个页面。我知道如果我想打印除right-column以外的所有区域，我会将.noprint {display:none;}添加到right-column
我想知道的是，我是否可以仅使用CSS打印1个或2个区域（其中5个区域）？如果它不可能并且它需要JS，那么完成工作的最小JS代码是什么？
例如，当我打印页面（ctrl + p或command + p）时，我只想打印区域2和3。下次我只想打印2，另一次我只想打印4。
答案 0 :(得分：1)
在执行打印操作之前，您必须使用jQuery为您想要显示的项目设置一个类，例如.visiblePrint并每次切换。
如果您愿意，也可以捕获打印请求： http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/
一个例子：
<script type="text/javascript">
$( document ).ready(function() {
printMode = 1;
var beforePrint = function() {
(printMode==3) ? printMode = 1 : printMode++;
console.log('Functionality to run before printing.');
};
var afterPrint = function() {
$('div').removeClass('visiblePrint');
switch(printMode) {
case 1:
$('#print1').addClass('visiblePrint');
break;
case 2:
$('#print2').addClass('visiblePrint');
break;
case 3:
$('#print3').addClass('visiblePrint');
break;
}
console.log('Functionality to run after printing');
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
$(window).on('beforeprint', beforePrint);
$(window).on('afterprint', afterPrint);
/*window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;*/
}());
</script>
<style type="text/css" media="print">
div {
display:none;
}
.visiblePrint {
display: block;
}
</style>
</head>
<body>
<div id="print1">Messaggio di stampa 1</div>
<div id="print2">Secondo messaggio di stampa</div>
<div id="print3">Viva la mamma</div>
</body>
不幸的是，它不跨浏览器，在chrome中提升2个事件的时间，在firefox中不会引发事件......