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将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 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函数
2006/10/09 PHP
php 结果集的分页实现代码
2009/03/10 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python实现发送邮件
2021/03/02 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
狼和鹿教学反思
2014/02/05 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
Nginx的gzip相关介绍
2022/05/11 Servers