Js打印页面指定内容

转载 2013年12月04日 14:03:44

一、主要代码

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打印页面指定内容

js打印WEB页面内容代码大全

第一种方法:指定不打印区域  使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内。  详细如下:      .noprint{visibility...
  • e_wsq
  • e_wsq
  • 2012年12月02日 02:49
  • 306

js灵活打印web页面区域内容的通用方法

我们做网站,经常需要打印页面指定区域的内容,而网上关于这块的说法很多,各种各样的打印控件也不少。但许多打印方案都不怎么好,至少我不喜欢,要么封装复杂,要么难以维护。正好现在的项目也需要用到页面打印,于...

【736c677c4】JS刷新iframe和打印页面的iframe内容

JS刷新框架 先来看一个简单的例子: 下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。 frame.html 由上(top.html)下...
  • slg1988
  • slg1988
  • 2012年04月26日 16:02
  • 4646

js 打印页面局部内容

///*********************** ///打印指定区域页面 ///说明:obj–通过getElementById或其它方式获取标签标识,打印此obj内的文字 ///...

用js实现页面打印以及自定义打印内容

实现一:   .noprint{display : none } 不需要打印的地方 打印的部分 实现二:WebBrowser控件 classid="CLSID:8856F961-3...
  • srozzy
  • srozzy
  • 2013年04月07日 17:52
  • 1134

JS实现Web中指定内容的保存与打印功能

背景 首先,说说文章的背景。最近手中的一个项目,由于需求中要求提供Web界面的打印功能,当然如果没有打印机,还可以提供保存到本地。项目组长把这个“小任务”分给了我。本着努力为组长分忧解难的思想,领...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Js打印页面指定内容
举报原因:
原因补充:

(最多只允许输入30个字)