评论：原生js打印插件Print.js  [查看原文]

。。不知道作者能不能给个有注释的学习版本谢谢。

charles2hang0
2018/7/9 21:30:05

先说明非作者哈XD 简单注释下：
//主函数：初始化打印dom 排除非打印区域
//原型链：
//init：调用链方法getStyle和getHtml将样式与dom字符串组装起来 write将该组装片段写入中
//extend：对象浅层扩展封装
//getStyle：从当前页面获取style标签和link标签 附加no-print隐藏样式 以写入
//getHtml：获取主函数中附着在this原型上的指定dom对象 并且将当前input、textarea、select的状态、内容二次赋值，以便在写入的时候能渲染出一样的结果
//write：将组装好的html字符串写入的DOM，其中doc.open()为打开写入文档流,才能写入内容，doc.close()为关闭写入文档流，以结束的load状态，其他的应该不难理解。

点击打印空白问题（有时）：是因为加载与打印是异步执行的，很容易导致在document.execCommand('print')的时候，还没加载出来，所以是一片空白。针对修改如下，将write方法与toPrint方法合并了。


write: function (content) {
           var w, doc,  = document.createElement(''),
               f = document.body.appendChild();
           .id = "print-";
           .src = '';
           .style = "position:absolute;width:0;height:0px;top:-10px;left:-10px;";

           w = f.contentWindow || f.contentDocument;
           doc = f.contentDocument || f.contentWindow.document;
           doc.open();
           doc.write(content);
           doc.close();
           w.onload = function () {
               try {
                   setTimeout(function () {
                       w.focus();
                       try {
                           if (!w.document.execCommand('print', false, null)) {
                               w.print();
                           }
                       } catch (e) {
                           w.print();
                       }
                       w.close();
                   }, 10);
               } catch (err) {
                   console.log('err', err);
               }
               setTimeout(function () {
                   document.body.removeChild();
               }, 100);
           };
       },

那个你好是不是没有打印机就打印不了。。

取消后，再次点击打印就没内容了？

jie40380
2017/11/27 18:05:15
什么浏览器？我没遇到这个情况

非常用，特别是支持css，找了好久才找到这个

怎样去掉IE中的页眉页脚

jie40380
2017/9/21 14:35:03

页眉页脚是浏览器的事，IE浏览器设置--打印--页面设置，页眉页脚选择空就好了。

不同浏览器设置的地方不同，慢慢找一下。

昵称什么的最讨厌了0
2017/10/27 15:56:39

好的 已经找到了 谢谢

厉害