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

来源：互联网发布：python参考手册 pdf 编辑：程序博客网时间：2024/04/30 14:32

在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>