原生js打印插件Print.js

所属分类:其他-独立的部件,杂项

原生js打印插件Print.js ie兼容9

Print.js 网页打印插件

  • 原生js,不依赖其它库

  • 可指定打印(或不打印)区域

  • 支持css样式(内联、外联、嵌入)

  • 支持input(radio/checkbox/text)、select、textarea值获取

使用方法

引入Print.js

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

绑定方法

Print('#Dom');

指定不打印区域

方法一. 添加no-print样式类

<div class="no-print">不要打印我</div>

方法二. 自定义类名

Print('#Dom',{'no-print':'.do-not-print-me-xxx'});
<div class="do-not-print-me-xxx">不要打印我</div>

思路

将目标区域的dom/css添加到空iframe中,打印该iframe。

注意

不支持background-color背景色打印,试试用background-image代替

只在浏览器中预览打印,未实际打印过, 公司无公用打印机.../汗

低级浏览器兼容性待验证

相关插件-独立的部件,杂项

jQuery分享插件jquery.share.js

jQuery分享插件jquery.share.js享到QQ、微信、微博、google、in、tweeter等
  独立的部件
 20488  214

html5手势解锁插件H5lock.js

html5手势解锁插件H5lock.js详细注释
  独立的部件
 9852  56

jQuery表格 可选择导出各种格式

表格内容详情可选择导出各种格式(Excel(xls)、PDF、PNG)
  独立的部件
 21217  168

后台管理框架

后台管理框架基于bootstrap
  独立的部件
 41959  259

讨论这个项目(17)回答他人问题或分享插件使用方法奖励jQ币

    keleno 0
    2018/4/8 12:05:39
    打印关闭事件无法触发什么鬼 回复
    For丨丶Tomorrow 0
    2018/3/27 11:19:59
    如果是ie浏览器,我想调用打印预览怎么弄 回复
    油儿饭 0
    2018/3/1 11:18:54
     刚试了感觉还可以,
    回复
    ?????? 0
    2018/2/27 17:48:59
    各位大神,ie10打印出来css为什么没有生效
    回复
    我行我素,爷乐意! 0
    2018/1/31 18:23:50

    点击打印是空白的,为啥呀

    回复
    破碎D信果 0
    2018/1/31 13:56:59

    请问各位大神, 为什么部分样式失效, 特别是使用定位,预览布局都乱的, 有什么好的方法解决吗

        jie40383
        2018/1/31 14:44:42

        插件中获取样式的代码:

        getStyle: function() {
          var str = "",
            styles = document.querySelectorAll('style,link');
          console.log(styles);
          for (var i = 0; i < styles.length; i++) {
            str += styles[i].outerHTML;
          }
          return str;
        }

        我简单试了一下fixed和absolute定位,打印预览时排版是正常的。建议依次排查原因:

        1. 因为使用了querySelectorAll,兼容性不是那么好,不知道你的浏览器是否支持。

        2.你可以把获取到的styles打印一下,看看是否完整。

        3.如果background-color丢失,在css中添加:

        @media print {
            body{-webkit-print-color-adjust:exact;} 
        }
    回复
    空白 0
    2017/12/30 9:13:42

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

    回复
    空白 0
    2017/12/28 23:51:59

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

    回复
    前端-技术部 0
    2017/11/25 10:36:40

    取消后,再次点击打印就没内容了?

        jie40380
        2017/11/27 18:05:15
        什么浏览器?我没遇到这个情况
    回复
    JoviChin 0
    2017/11/17 11:56:35
    支持各种css,这才是最好的 回复
取消回复