HTML页面实现打印功能

示例1:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>局部打印案例</title>
 6 
 7     <script type="text/javascript">
 8         function doPrint() {
 9             //获取整个打印前页面,作用是打印后恢复。
10             bdhtml = window.document.body.innerHTML;
11             sprnstr = "<!--startprint-->"; //标记打印区域开始
12             eprnstr = "<!--endprint-->";//标记打印区域结束
13             //获取要打印的区域, 从标记开始处向下获取。
14             prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);//17表示光标右移17个单位
15             //删除结束标记后面的内容。
16             prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
17             //将页面显示要打印的内容。
18             window.document.body.innerHTML = prnhtml;
19             //打印整个页面
20             window.print(prnhtml);
21             //恢复打印前的页面
22             window.document.body.innerHTML = bdhtml;
23 
24         }
25     </script>
26 
27 
28 </head>
29 
30 <body>
31     <p>1不需要打印的地方</p>
32     <!--startprint-->
33     <!--注意要加上html里star和end的这两个标记-->
34     <h1>打印标题</h1>
35     <p>打印内容~~</p>
36     <!--endprint-->
37     <button type="button" onclick="doPrint()">打印</button>
38     <p>2不需要打印的地方</p>
39 </body>
40 
41 </html>

 

示例2:

 

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <span id="cc">
        这里有一头猪要打一下。
    </span>
    <div>
        <a id="ps" href="javascript:;">打印</a>
    </div>
</body>
<script type="text/javascript">
    var ps = document.getElementById(ps);

    function preview(id) {
        var sprnhtml = $(# + id).html(); //获取区域内容
        var selfhtml = $(body).html(); //获取当前页的html, 用来恢复页面
        //设置整个页面为要打印的内容。
        $(body).html(sprnhtml);
        //打印预览整个页面。
        window.print();
        //恢复整个页面到打印前的内容。
        $(body).html(selfhtml);
    }

    ps.onclick = function () {
        preview(cc);
    }
</script>
</html>

 

HTML页面实现打印功能

上一篇:WEB前端第十课——CSS字体、文本、列表属性


下一篇:本章介绍HTML5 拥有若干涉及表单的元素和属性