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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
javascript 学习之旅 (3)
Feb 05 Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jquery仿微信聊天界面
May 06 jQuery
angularjs实现table增加tr的方法
Feb 27 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP制作万年历
2015/01/07 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
Python3多线程基础知识点
2019/02/19 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
Hotels.com印度:酒店预订
2019/05/11 全球购物
幼儿园安全责任书
2014/04/14 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
收银员岗位职责范本
2015/04/07 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
跑出一片天观后感
2015/06/08 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
python双向链表实例详解
2022/05/25 Python