bootstrap PrintThis打印插件使用详解


Posted in Javascript onFebruary 20, 2017

bootstrap PrintThis打印效果图:

bootstrap PrintThis打印插件使用详解

如图,这个是调用了谷歌的打印,使用很方便,可以自己?样式,需要的可以研究一下,这边贴出使用方法。

附上GitHub:https://github.com/jasonday/printThis
jsp:

<script src="<%=basePath %>bootstrap/js/printThis.js"></script>

 

<!-- 二维码弹出框 --> 
<div class="modal fade" id="myModal_qrcode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 <div class="modal-dialog" role="document"> 
  <div class="modal-content"> 
   <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
     <span aria-hidden="true">×</span> 
    </button> 
    <h4 class="modal-title" id="myModalLabel">二维码</h4> 
   </div> 
   <div class="modal-body"> 
    <center> 
     <div id="qrcode"></div> 
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <label class="col-sm-4 control-label" for="equ_name_qrcode"><h7>设备名称:</h7></label> 
         <div class="col-sm-8"> 
          <input class="form-control" id="equ_name_qrcode" type="text"/> 
         </div> 
        </td> 
        <td> 
         <label class="col-sm-4 control-label" for="equ_ip_qrcode"><h7>设备IP:</h7></label> 
         <div class="col-sm-8"> 
         <input class="form-control" id="equ_ip_qrcode" type="text"/> 
         </div> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </center> 
   </div> 
   <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal"> 
     <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭 
    </button> 
    <button type="button" id="btn_print" class="btn btn-primary" data-dismiss="modal"> 
     <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>打印 
    </button> 
   </div> 
  </div> 
 </div> 
</div>

js:

$("#btn_print").click(function(event) { 
  /* Act on the event */ 
   $("#qrcode").printThis({ 
    debug: false, 
    importCSS: false, 
    importStyle: false, 
    printContainer: true, 
//    loadCSS: "/Content/Themes/Default/style.css", 
    pageTitle: "二维码", 
    removeInline: false, 
    printDelay: 333, 
    header: null, 
    formValues: false 
   }); 
//  alert("等待打印"); 
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
jquery select操作的日期联动实现代码
Dec 06 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
Angular工具方法学习
Dec 26 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
jQuery实现文档树效果
Feb 20 #Javascript
js以及jquery实现手风琴效果
Apr 17 #Javascript
写jQuery插件时的注意点
Feb 20 #Javascript
Node.js获取前端ajax提交的request信息
Feb 20 #Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 #Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 #Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 #Javascript
You might like
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
python实现图片批量剪切示例
2014/03/25 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
初二物理教学反思
2014/01/29 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
2014年教师节活动总结
2014/08/29 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
财务负责人岗位职责
2015/02/03 职场文书
升职自荐信怎么写
2015/03/05 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS