• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > bootstrap PrintThis打印插件使用详解

bootstrap PrintThis打印插件使用详解

作者:Java软件小白 字体:[增加 减小] 来源:互联网 时间:2017-05-11

Java软件小白通过本文主要向大家介绍了bootstrap css详解,bootstrap详解,bootstrap分页插件,bootstrap插件,bootstrap table插件等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

bootstrap PrintThis打印效果图:

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

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

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

 

<!-- 二维码弹出框 --> 
<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> 


</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("等待打印"); 
 }); 
</div>

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • Bootstrap 网格系统布局详解
  • bootstrap PrintThis打印插件使用详解
  • Bootstrap表格使用方法详解
  • Bootstrap BootstrapDialog使用详解
  • BootStrapValidator初使用教程详解
  • 详解bootstrap的modal-remote两种加载方式【强化】
  • bootstrap css样式之表单
  • bootstrap手风琴制作方法详解

相关文章

  • 2017-05-11jQuery中DOM节点的删除方法总结(超全面)
  • 2017-05-11基于JS实现翻书效果的页面切换样式
  • 2017-05-11jQuery Ajax前后端使用JSON进行交互示例
  • 2017-05-11JS实现直接运行html代码的方法
  • 2017-05-11JS实现列表页面隔行变色效果
  • 2017-05-11jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
  • 2017-05-11详谈js遍历集合(Array,Map,Set)
  • 2017-05-11浅谈angularjs $http提交数据探索
  • 2017-05-11Bootstrap页面缩小变形的快速解决办法
  • 2017-05-11微信小程序 video详解及简单实例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 微信小程序 实战实例开发流程详细介绍
    • jquery实现刷新随机变化样式特效(tag标签样式)
    • Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
    • JS实现图片高斯模糊切换效果的焦点图实例
    • angularjs使用directive实现分页组件的示例
    • 动态加载css方法实现和深入解析
    • 详解JavaScript RegExp对象
    • es6 Destructuring(解构)
    • Bootstrap禁用响应式布局的实现方法
    • js正则表达式验证密码强度【推荐】

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有