快捷導(dǎo)航

bootstrap PrintThis打印插件使用詳解

更新時(shí)間：2017年02月20日 17:15:31 作者：Java軟件小白

這篇文章主要為大家詳細(xì)介紹了bootstrap PrintThis打印插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

bootstrap PrintThis打印效果圖：

如圖，這個(gè)是調(diào)用了谷歌的打印，使用很方便，可以自己調(diào)樣式，需要的可以研究一下，這邊貼出使用方法。

附上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>設(shè)備名稱:</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>設(shè)備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>關(guān)閉 
    </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("等待打印"); 
 });

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)日期時(shí)間篩選器
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)日期時(shí)間篩選器，支持年月日時(shí)分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
JS數(shù)組push、unshift、pop、shift方法的實(shí)現(xiàn)與使用方法示例
這篇文章主要介紹了JS數(shù)組push、unshift、pop、shift方法,結(jié)合實(shí)例形式分析了JS數(shù)組push、unshift、pop、shift方法針對(duì)數(shù)組添加、刪除等相關(guān)操作技巧,需要的朋友可以參考下
2020-04-04
Js過濾空格的實(shí)現(xiàn)代碼
Js空格過濾代碼，這個(gè)實(shí)用性很強(qiáng)，可以省去用動(dòng)態(tài)語言過濾字符的麻煩，減輕服務(wù)器壓力，而且JS執(zhí)行速度較快
2013-03-03
判斷JavaScript對(duì)象是否可用的最正確方法分析
在調(diào)試JavaScript的過程中，你是不是經(jīng)常會(huì)遇到object undefined的問題呢？你平時(shí)是怎樣來測試對(duì)象是否存在呢？判斷瀏覽器版本？判斷JavaScript版本？本文來告訴你正確的方法。這篇文章涉及的瀏覽器可能古老一些，但是闡述的道理確實(shí)適合現(xiàn)在使用的。
2008-10-10
csdn 博客的css樣式 v3
僅相隔一天就出了個(gè)v3。修正了一個(gè)bug，firefox左側(cè)內(nèi)容寬度錯(cuò)誤。
2009-02-02
JSDoc 介紹使用規(guī)范JsDoc的使用介紹
JsDoc Toolkit 是一個(gè)把js描述格式化成文檔的工具。開發(fā)者只需按JsDoc的規(guī)范寫好注釋就可以很方便導(dǎo)出文檔。它是google 推薦的 JsDoc生成工具。
2011-02-02
Javascript循環(huán)綁定事件的示例代碼
我們先看一個(gè)關(guān)于Javascript利用循環(huán)綁定事件的例子
2008-10-10
js前端加載超大圖片(100M以上)實(shí)現(xiàn)秒開的最佳解決方案
前端加載超大圖片時(shí),一般可以采取圖片壓縮,圖片分割,預(yù)加載等措施,而對(duì)于幾百M(fèi)或上G的大圖而言,不管對(duì)圖片進(jìn)行怎么優(yōu)化或加速處理,要實(shí)現(xiàn)秒開也是不太可能的事情,所以本文小編將給大家介紹如何對(duì)大圖進(jìn)行分割,在前端進(jìn)行拼接實(shí)現(xiàn)秒開,需要的朋友可以參考下
2023-10-10
js數(shù)組如何添加json數(shù)據(jù)及js數(shù)組與json的區(qū)別
在JSON中，有兩種數(shù)據(jù)結(jié)構(gòu)：對(duì)象和數(shù)組。本篇文章給大家介紹js數(shù)組如何添加json數(shù)據(jù)以及js數(shù)組和json的區(qū)別，涉及到j(luò)s json數(shù)組添加相關(guān)知識(shí)，感興趣的朋友可以參考下本篇文章
2015-10-10
JavaScript仿支付寶6位數(shù)字密碼輸入框
最近做了一個(gè)項(xiàng)目，涉及到某寶購物支付密碼的輸入框功能，下面小編把實(shí)現(xiàn)思路分享到腳本之家平臺(tái)供大家參考
2016-12-12