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脚本
Dec 12 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
js控制frameSet示例
Sep 10 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 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下一个非常全面获取图象信息的函数
2008/11/20 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
百度移动版的url编码解码示例
2014/04/29 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
Vue进度条progressbar组件功能
2018/04/17 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
企业厂务公开实施方案
2014/03/26 职场文书
个人委托书怎么写
2014/04/04 职场文书
大学生党员承诺书
2014/05/20 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
英语教师个人工作总结
2015/02/09 职场文书
食品质检员岗位职责
2015/04/08 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
Python MNIST手写体识别详解与试练
2021/11/07 Python