HTML页面实现打印功能

 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 = ""; //标记打印区域开始
12             eprnstr = "";//标记打印区域结束
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     
33     
34     h1>打印标题h1>
35     p>打印内容~~p>
36     
37     button type="button" onclick="doPrint()">打印button>
38     p>2不需要打印的地方p>
39 body>
40 
41 html>

DOCTYPE html>
html lang="zh_CN">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Printtitle>
    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>