原生js打印插件Print.js

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

 116085  479  查看评论 (59)
分享到微信朋友圈
X
原生js打印插件Print.js ie兼容9

更新时间:2018/11/16 下午4:09:50

更新说明:
1. 新增了打印回调方法 onStart()和onEnd();
2. 修复了有时打印空白的bug;


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网站引导插件joyride

jQuery网站引导插件joyride
  独立的部件
 33618  326

jQuery分享插件jquery.share.js

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

jQuery表格导出数据

将表格的数据导出到excel,csv,pdf或是直接打印
  独立的部件
 51327  566

CSS3开关切换按钮

多组超具创意的CSS3开关切换按钮
  独立的部件
 42420  500

讨论这个项目(59)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    大大大悟空。 0
    2021/9/18 14:04:44
    我想问问我用Print.js 打印的是一个dom,这个dom里面有多张图片,实现了分页但是每张图片都好小,有什么办法可以让图片铺满a4纸吗? 回复
    Hustle 0
    2021/1/11 11:10:38
    打印时头部会出现document字样、页脚会有url怎么处理啊
        西瓜0
        2021/1/11 11:16:14

        这个在浏览器里设置,点击打印后点击更多设置,选项中的,页眉和页脚勾选去掉

        cc.png

    回复
    随雨听风 0
    2020/3/27 9:12:35
    函数内的onStart和onEnd没法区分打印,还是取消,要是能区分就好了。还有我想问一下,可以设置打印内容在打印预览中的样式吗?比如说我要打印三张纸,每一张纸的内容垂直水平居中,剩下的自动挤到下一张纸。 回复
    to fly 0
    2019/12/15 19:34:00
    大神,能不能给个分页教程?要打印多个单子,怎么让第二单不从中间分? 回复
    向着阳光 0
    2019/12/4 10:35:10
    可以取消浏览器默认打印预览,直接打印吗 回复
    王智 0
    2019/9/7 12:08:17
    background-color为啥打不了呢,我添加了background-image,依然没有打印效果,有同学碰到我这个问题了吗,打印radio和checkbox选中项
        ♥ Thorn0
        2020/8/16 23:30:58
        同添加了背景,没法赋上
    回复
    --- 0
    2019/8/8 16:01:32
    跨越地址是有十几页的内容,可是打印的只有一页 回复
    13 0
    2019/8/5 12:28:55
    ie不兼容啊
        Horses、浩0
        2019/11/13 17:36:19
        回退版本
    回复
    xiaoyangzeizhuai1989 0
    2019/6/24 16:35:07
    table有横向滚动条,打印预览会被切掉一部分,这个怎么搞? 回复
    ?遮? 0
    2019/4/23 15:07:38
    css 样式在预览的时候没用啊 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复