打印Web页面局部内容的两种常用方法 -

lsjlym

浏览: 21600 次
性别:
来自: 深圳

最近访客更多访客>>

AndriyChoi

finikes

welee

jinfan1115

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

打印Web页面局部内容的两种常用方法

在Web前端开发中，常有仅需要打印页面局部内容的要求。总的来说，有两种方法可以实现此目标：

一、使用css方式
示例代码：
<style type="text/css">
.selector1 { ... }
.selector2 { ... }
.selector3 { ... }

/* 为打印定义 */
@media print
{
.selector1 { ... }
.selector2 { display: none; }
.noprint { display: none; }
}
</style>
代码说明：
1、选择器selector1在@media print中重新定义，浏览器显示使用外边的selector1，打印时使用@media print定义的selector1；
2、选择器selector2在@media print中重新定义，浏览器显示使用外边的selector2，打印时使用@media print定义的selector2，因此处包含display: none，所以所有class包含selector2的元素将不会打印出来；
3、选择器selector2在@media print中没有重新定义，浏览器显示和打印时，将使用相同的样式设置。
4、选择器noprint只在@media print中定义，所以浏览器显示时不会起作用，只在页面打印时应用其设置的样式。
利用此特性，可以实现页面的局部打印功能。

二、使用javascript方式
示例目标打印页面Target.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>打开打印预览页面Preview.html</title>
<script>
// 打开打印预览页面，传递打印内容
function preview() {
// 以JSON对象为showModalDialog函数的第二个参数，
// 以传递任何对象或字符串(包括有效的HTML格式内容)到打开的模态打印预览对话框
window.showModalDialog('Preview.html', {
styles: document.styleSheets,
header: '<font size="36px">测试</font>',
content: document.getElementById('待打印dom元素的id')
}, null);
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="Target.html">
<input id="preview" type="button" value="打印" onclick="preview();" />
<div>
无需打印内容
</div>
<div id="待打印dom元素的id">
此处可以是任何数量和复杂程度的，待打印的有效HTML内容！
</div>
<div>
无需打印内容
</div>
</form>
</body>
</html>

打印预览页面Preview.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
// 初始化页面大小
window.resizeTo(window.screen.availWidth, window.screen.availHeight);
window.moveTo(0, 0);
</script>
</head>
<body>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
<script>
// 添加和返回一个style元素帮助函数
function addNewStyle() {
var head, style;
//
head = document.getElementsByTagName('head')[0];
style = document.createElement('style');
style.type = 'text/css';
head.appendChild(style);
//
return style;
}

// 获取传递的参数
var args = window.dialogArguments;
// 确保目标页面定义的样式可以传递到打印预览页面。
// 如果不需要，打印预览页面无需定义打印内容的样式，使用源页面定义样式
if (args.styles) {
for (var i = 0; i < args.styles.length; i++) {
var style = addNewStyle();
//
var styleText = '';
for (var j = 0; j < args.styles[i].rules.length; j++) {
var rule = args.styles[i].rules[j];
styleText += rule.cssText;
}
//
if (style.styleSheet) style.styleSheet.cssText = styleText;
else style.appendChild(document.createTextNode(styleText));
}
}
// 如果定义header则打印
if (args.header)
document.getElementById('header').innerHTML = args.header;
// 如果定义content则打印
if (args.content) {
if (typeof (args.content) == 'string')
// 直接传递有效HTML内容
document.getElementById('content').innerHTML = args.content;
else
// 传递待打印的DOM元素
document.getElementById('content').innerHTML = args.content.outerHTML;
}
// 如果定义footer则打印
if (args.footer)
document.getElementById('footer').innerHTML = args.footer;
// 不需要打印预览，反注释下面代码可实现直接打印
// window.print();
// window.close();
</script>
</body>
</html>

分享到：