关闭

Js打印页面指定内容

391人阅读 评论(0) 收藏 举报
分类:

一、主要代码

1、js代码

1
2
3
4
5
6
7
8
9
function doPrint() {
    bdhtml=window.document.body.innerHTML;
    sprnstr="<!--startprint-->";
    eprnstr="<!--endprint-->";
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
    window.document.body.innerHTML=prnhtml;
    window.print();
}

2、html代码

在需要打印的地方用<!–startprint–><!–endprint–>包裹

二、截图


三、实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html>
    <head>
        <style>
            * { margin:0px; padding:0px; }
            
            body {
                background:#FAFAFA;            
                color: #303030;
            font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
            font-size: 13px;
            line-height: 18px;
            text-align:center;
            }
            table {
                background:#fff;
                border-right:1px solid #ddd;
                border-bottom:1px solid #ddd;
                border-collapse: separate;
                border-spacing: 0;
                box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
                width:800px;
                margin:0 auto;
                margin-top:50px;
            }
            tr { border:1px solid #DDDDDD; font-size: 13px; }            
            th,td { border-top:1px solid #ddd; border-left:1pxsolid #ddd; padding:8px; }
            
            th {
                background: linear-gradient(center top , #F6F6F6, #EEEEEE) repeat scroll 0 0 rgba(0, 0, 0, 0);
                background:-moz-linear-gradient(center top , #F6F6F6, #EEEEEE) repeat scroll 0 0 rgba(0, 0, 0, 0);
                background:-webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eee));
                text-align:left;
                text-shadow: 0 1px 0 #FFFFFF;
            }
            button { margin-top:20px; width:100px; height:30px; }
        </style>
    </head>
    
    <body>
        <!--startprint-->
        <table class="datatable">
            <thead>
            <tr>
                <th># ID</th><th> Name</th><th>Age</th> <th>Email</th><th>Url</th>
            </tr>
            </thead>
            <tr>
                <td>1</td><td>Gonzo the Great</td><td>20</td><td>test@qq.com</td><td>http://www.52wulian.org</td>
            </tr>
            <tr>
                <td>1</td><td>Gonzo the Great</td><td>20</td><td>test@qq.com</td><td>http://www.52wulian.org</td>
            </tr>
            <tr>
                <td>1</td><td>Gonzo the Great</td><td>20</td><td>test@qq.com</td><td>http://www.52wulian.org</td>
            </tr>
            <tr>
                <td>1</td><td>Gonzo the Great</td><td>20</td><td>test@qq.com</td><td>http://www.52wulian.org</td>
            </tr>
            <tr>
                <td>1</td><td>Gonzo the Great</td><td>20</td><td>test@qq.com</td><td>http://www.52wulian.org</td>
            </tr>
        </table>
        <!--endprint-->
        
        <button onclick=doPrint();>Print</button>
        <script>
            function doPrint() {
                bdhtml=window.document.body.innerHTML;
                sprnstr="<!--startprint-->";
                eprnstr="<!--endprint-->";
                prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
                prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
                window.document.body.innerHTML=prnhtml;
                window.print();
            }
        </script>
    </body>
</html>
文章信息:
  欢迎转载,请注明转自:我爱物联网(http://www.52wulian.org)
  本文链接: Js打印页面指定内容
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:280251次
    • 积分:3570
    • 等级:
    • 排名:第9530名
    • 原创:42篇
    • 转载:41篇
    • 译文:41篇
    • 评论:42条
    文章分类
    最新评论