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:

 <!doctype html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Print.js 演示</title>

 <meta name="author" content="DH">

 <link rel="stylesheet" href="files/comm.css" />

 <style>

     .wrap {

       margin: 0 auto;

       padding: 20px;

       width: 640px;

       border: 1px solid #ccc;

     }

     .form .row {

       padding: 10px 0 0;

     }

     .btn {

       display: block;

       margin: 20px auto;

       padding: 8px 16px;

     }

     html,body{margin:0;padding:0}

     body{font-size:14px;color:#333}

     @page{

       size: A4 landscape;

       margin:1cm;

     }

     @media print{

       body{-webkit-print-color-adjust:exact}

       .showy{overflow-x:visible}

     }

     .fr{float:right}

     .vt{vertical-align:top}

   </style>

 </head>

 <body>

 <div id="wrap" class="wrap">

   <div class="con">

     <h1>萨摩耶犬</h1>

     <p>萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬</p>

     <h1>萨摩耶犬</h1>

     <p>萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬</p>

     <h1>萨摩耶犬</h1>

     <p>萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬</p>

     <h1>萨摩耶犬</h1>

     <p>萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬萨摩耶犬</p>

   </div>

   <button class="btn no-print" id="btn">打印</button>

 </div>

 <script src="files/Print.js"></script>

 <script>

     document.getElementById('btn').onclick = function () {

       Print('#wrap', {

         onStart: function () {

           console.log('onStart', new Date())

         },

         onEnd: function () {

           console.log('onEnd', new Date())

         }

       })

     }

   </script>

 </body>

 </html>

js:

 /* @Print.js

  */

 (function (window, document) {

   var Print = function (dom, options) {

     if (!(this instanceof Print)) return new Print(dom, options);

     this.options = this.extend({

       noPrint: '.no-print',

       onStart: function () { },

       onEnd: function () { }

     }, options);

     if ((typeof dom) === "string") {

       this.dom = document.querySelector(dom);

     } else {

       this.dom = dom;

     }

     this.init();

   };

   Print.prototype = {

     init: function () {

       var content = this.getStyle() + this.getHtml();

       this.writeIframe(content);

     },

     extend: function (obj, obj2) {

       for (var k in obj2) {

         obj[k] = obj2[k];

       }

       return obj;

     },

     getStyle: function () {

       var str = "",

         styles = document.querySelectorAll('style,link');

       for (var i = 0; i < styles.length; i++) {

         str += styles[i].outerHTML;

       }

       str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";

       return str;

     },

     getHtml: function () {

       var inputs = document.querySelectorAll('input');

       var textareas = document.querySelectorAll('textarea');

       var selects = document.querySelectorAll('select');

       for (var k in inputs) {

         if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {

           if (inputs[k].checked == true) {

             inputs[k].setAttribute('checked', "checked")

           } else {

             inputs[k].removeAttribute('checked')

           }

         } else if (inputs[k].type == "text") {

           inputs[k].setAttribute('value', inputs[k].value)

         }

       }

       for (var k2 in textareas) {

         if (textareas[k2].type == 'textarea') {

           textareas[k2].innerHTML = textareas[k2].value

         }

       }

       for (var k3 in selects) {

         if (selects[k3].type == 'select-one') {

           var child = selects[k3].children;

           for (var i in child) {

             if (child[i].tagName == 'OPTION') {

               if (child[i].selected == true) {

                 child[i].setAttribute('selected', "selected")

               } else {

                 child[i].removeAttribute('selected')

               }

             }

           }

         }

       }

       return this.dom.outerHTML;

     },

     writeIframe: function (content) {

       var w, doc, iframe = document.createElement('iframe'),

         f = document.body.appendChild(iframe);

       iframe.id = "myIframe";

       iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";

       w = f.contentWindow || f.contentDocument;

       doc = f.contentDocument || f.contentWindow.document;

       doc.open();

       doc.write(content);

       doc.close();

       this.toPrint(w, function () {

         document.body.removeChild(iframe)

       });

     },

     toPrint: function (w, cb) {

       var _this = this;

       w.onload = function () {

         try {

           setTimeout(function () {

             w.focus();

             typeof _this.options.onStart === 'function' && _this.options.onStart();

             if (!w.document.execCommand('print', false, null)) {

               w.print();

             }

             typeof _this.options.onEnd === 'function' && _this.options.onEnd();

             w.close();

             cb && cb()

           });

         } catch (err) {

           console.log('err', err);

         }

       }

     }

   };

   window.Print = Print;

 }(window, document));

扩展阅读

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

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

http://www.cokea.com

文档打印 js print调用打印dom内容的更多相关文章

  1. javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率

    刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...

  2. C#通过调用WinApi打印PDF文档类，服务器PDF打印、IIS PDF打印

    其他网站下载来的类,可以用于Winform.Asp.Net,用于服务器端PDF或其他文件打印. 直接上代码: using System; using System.Collections.Generi ...

  3. 生成二维码的js以及调用打印插件

    插件: qrcode.js 插件下载网址:http://code.ciaoca.com/javascript/qrcode/ 用法实例: <script type="text/java ...

  4. 使用文档碎片（DocumentFragments）追加DOM元素

    标签(空格分隔): JavaScript DocumentFragment接口表示一个没有父级文件的最小文档对象.它被当做一个轻量版的Document使用,用于存储已排好版的或尚未打理好格式XML片段 ...

  5. VS Code 中 HTML 文档注释 js 语句异常

    今天用 VS Code 编辑 html 文档时,发现快捷键注释 js 代码显示成 “<!--  …… -->”,怀疑是不是因为安装了某个插件,随后排查出系 Jinja 所致,将其禁用之后就 ...

  6. HTML文档插入JS代码的几种方法

    在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内联,放置在< script>和标签对之间. 2.放置在由< script>标签的src属性指定的外部文件中 ...

  7. Javascript样例之文档章节滚动全版（DOM）

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABBMAAAC5CAIAAAD1bOCRAAAMEUlEQVR4nO3d4XEbyREGUGRCZQDGcG

  8. 文档的js

    /* 主站,子频道,定向站点共用 */ (function() { scrollToAnchor(); toggleSearchForm(); scrollTop(); initScrollBar() ...

  9. java对word文档的操作（提取标题和内容等）-直接操作或poi工具包或freemarker+xml或html转word

    1,java自带工具包实现对word的排版和写入 import java.awt.Color; import java.io.FileNotFoundException; import java.io ...

随机推荐

  1. GC是什么？为什么我们要去使用它

    GC(Garbage Collection)是各大语言的宠儿,也是计算机科学领域里很热门的一个话题.最早在JVM中有看过这个算法,后来发现即使是js这种脚本语言也是有GC的.单纯就JVM来说的话,GC ...

  2. JavaScript数据结构——字典和散列表的实现

    在前一篇文章中,我们介绍了如何在JavaScript中实现集合.字典和集合的主要区别就在于,集合中数据是以[值,值]的形式保存的,我们只关心值本身:而在字典和散列表中数据是以[键,值]的形式保存的,键 ...

  3. （通俗易懂小白入门）网络流最大流——EK算法

    网络流 网络流是模仿水流解决生活中类似问题的一种方法策略,来看这么一个问题,有一个自来水厂S,它要向目标T提供水量,从S出发有不确定数量和方向的水管,它可能直接到达T或者经过更多的节点的中转,目前确定 ...

  4. 用JavaScript带你体验V8引擎解析标识符过程

    上一篇讲了字符串的解析过程,这一篇来讲讲标识符(IDENTIFIER)的解析. 先上知识点,标识符的扫描分为快解析和慢解析,一旦出现Ascii值大于128的字符或者转义字符,会进入慢解析,略微影响性能 ...

  5. 利用反射搭建orm框架

    1思路 根据java反射获取属性上的 注解的value的值 然后拼接成sql去执行 这就是完成了一个orm实体关系映射 package src.Test.Reflect;import java.lan ...

  6. 一文了解：Redis过期键删除策略

    Redis过期键删除策略 Redis中所有的键都可以设置过期策略,就像是所有的键都可以上"生死簿",上了生死簿的键到时间后阎王就会叉掉这个键.同一时间大量的键过期,阎王就会忙不过来 ...

  7. Spring基础笔记

    Spring带给了我们什么便利? 注解版本的IOC如何玩? 组件注册 组件注册的过程中有哪些过滤规则? 如何控制组件的作用域(单例多例)? 六种注册组件的方式? 生命周期 什么是bean的生命周期 在 ...

  8. jenkins增量更新及重启服务步骤

    jenkins增量更新步骤:(以creditsys_service_tomcat为例) 1.SecureCRT 或者Xshell 连接服务器192.168.*.*,账号:test/**** 2.cd ...

  9. spring-cloud-config 配置中心快速上手

    spring-cloud-config 配置中心实现 Spring Cloud Config 用于为分布式系统中的基础设施和微服务应用提供集中化的外部配置支持,分为server端和client端. s ...

  10. Web API Media Type Formatter

    public static void Register(HttpConfiguration config) { // Web API configuration and services // Web ...