文档打印 js print调用打印dom内容

1.首先按目前研究 print可以打印dom

2.被设置overflow:hidden 的模块,打印时会被截掉。

3.被设置成 display:none 的dom 打印不会有样式 边框等。

4.如果需要改变打印样式则需要css3媒体查询,并确保样式被加载到输出的dom中

例如:

<style type="text/css">
@media print {
.showy>p{display:none;}
.cls{display:none;}
td {background-color: red; border:1px solid #333; }}
iframe{position:absolute;top:-100000px;left:-100000px;}

@page{
size: A4 landscape;
margin:1cm;
}

</style>

下面是完整的例子:

html:

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Print.js 演示</title>
 6 <meta name="author" content="DH">
 7 <link rel="stylesheet" href="files/comm.css" />
 8 <style>
 9     .wrap {
10       margin: 0 auto;
11       padding: 20px;
12       width: 640px;
13       border: 1px solid #ccc;
14     }
15 
16     .form .row {
17       padding: 10px 0 0;
18     }
19 
20     .btn {
21       display: block;
22       margin: 20px auto;
23       padding: 8px 16px;
24     }
25     html,body{margin:0;padding:0}
26     body{font-size:14px;color:#333}
27 
28     @page{
29       size: A4 landscape;
30       margin:1cm;
31     }
32     @media print{
33       body{-webkit-print-color-adjust:exact}
34       .showy{overflow-x:visible}
35     }
36 
37     .fr{float:right}
38     .vt{vertical-align:top}
39   </style>
40 </head>
41 <body>
42 <div id="wrap" class="wrap">
43   <div class="con">
44     <h1>萨摩耶犬</h1>
45     <p>萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬</p>
46     <h1>萨摩耶犬</h1>
47     <p>萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬</p>
48     <h1>萨摩耶犬</h1>
49     <p>萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬</p>
50     <h1>萨摩耶犬</h1>
51     <p>萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬</p>
52 
53   </div>
54   <button class="btn no-print" id="btn">打印</button>
55 </div>
56 <script src="files/Print.js"></script>
57 <script>
58     document.getElementById('btn').onclick = function () {
59 
60       Print('#wrap', {
61         onStart: function () {
62           console.log('onStart', new Date())
63         },
64         onEnd: function () {
65           console.log('onEnd', new Date())
66         }
67       })
68 
69     }
70   </script>
71 </body>
72 </html>
View Code

js:

  1 /* @Print.js
  2  */
  3 (function (window, document) {
  4   var Print = function (dom, options) {
  5     if (!(this instanceof Print)) return new Print(dom, options);
  6 
  7     this.options = this.extend({
  8       noPrint: '.no-print',
  9       onStart: function () { },
 10       onEnd: function () { }
 11     }, options);
 12 
 13     if ((typeof dom) === "string") {
 14       this.dom = document.querySelector(dom);
 15     } else {
 16       this.dom = dom;
 17     }
 18 
 19     this.init();
 20   };
 21   Print.prototype = {
 22     init: function () {
 23       var content = this.getStyle() + this.getHtml();
 24       this.writeIframe(content);
 25     },
 26     extend: function (obj, obj2) {
 27       for (var k in obj2) {
 28         obj[k] = obj2[k];
 29       }
 30       return obj;
 31     },
 32 
 33     getStyle: function () {
 34       var str = "",
 35         styles = document.querySelectorAll('style,link');
 36       for (var i = 0; i < styles.length; i++) {
 37         str += styles[i].outerHTML;
 38       }
 39       str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
 40 
 41       return str;
 42     },
 43 
 44     getHtml: function () {
 45       var inputs = document.querySelectorAll('input');
 46       var textareas = document.querySelectorAll('textarea');
 47       var selects = document.querySelectorAll('select');
 48 
 49       for (var k in inputs) {
 50         if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
 51           if (inputs[k].checked == true) {
 52             inputs[k].setAttribute('checked', "checked")
 53           } else {
 54             inputs[k].removeAttribute('checked')
 55           }
 56         } else if (inputs[k].type == "text") {
 57           inputs[k].setAttribute('value', inputs[k].value)
 58         }
 59       }
 60 
 61       for (var k2 in textareas) {
 62         if (textareas[k2].type == 'textarea') {
 63           textareas[k2].innerHTML = textareas[k2].value
 64         }
 65       }
 66 
 67       for (var k3 in selects) {
 68         if (selects[k3].type == 'select-one') {
 69           var child = selects[k3].children;
 70           for (var i in child) {
 71             if (child[i].tagName == 'OPTION') {
 72               if (child[i].selected == true) {
 73                 child[i].setAttribute('selected', "selected")
 74               } else {
 75                 child[i].removeAttribute('selected')
 76               }
 77             }
 78           }
 79         }
 80       }
 81 
 82       return this.dom.outerHTML;
 83     },
 84 
 85     writeIframe: function (content) {
 86       var w, doc, iframe = document.createElement('iframe'),
 87         f = document.body.appendChild(iframe);
 88       iframe.id = "myIframe";
 89       iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
 90 
 91       w = f.contentWindow || f.contentDocument;
 92       doc = f.contentDocument || f.contentWindow.document;
 93       doc.open();
 94       doc.write(content);
 95       doc.close();
 96       this.toPrint(w, function () {
 97         document.body.removeChild(iframe)
 98       });
 99     },
100 
101     toPrint: function (w, cb) {
102       var _this = this;
103       w.onload = function () {
104         try {
105           setTimeout(function () {
106             w.focus();
107             typeof _this.options.onStart === 'function' && _this.options.onStart();
108             if (!w.document.execCommand('print', false, null)) {
109               w.print();
110             }
111             typeof _this.options.onEnd === 'function' && _this.options.onEnd();
112             w.close();
113             cb && cb()
114           });
115         } catch (err) {
116           console.log('err', err);
117         }
118       }
119     }
120   };
121   window.Print = Print;
122 }(window, document));
View Code

 

 

扩展阅读

https://cloud.tencent.com/developer/section/1072311

http://www.jq22.com/jquery-info15776

http://www.cokea.com

转载于:https://www.cnblogs.com/zuhao/p/11313793.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值