国产精品美女免费看,精品亚洲成人,久久久久久久国产

jQuery打印插件printPage

Posted on 2016-11-29 11:53 ZhouFeng 閱讀(2358) 評論(0) 編輯收藏所屬分類: Web開發

因最近項目中要用到打印，研究了一些打印方案，考慮過生成PDF再打印的方案，只是客戶端需要安裝程序，內容輸出的控制不太方便，在網上找了一些稍微輕量級的插件來做，項目中有用到jQuery，便嘗試了一下printPage打印插件，其它的沒有花時間去對比，這個插件能滿足需要，對輸出內容控制也方便，就是一個HTML頁面，也就確定用這個插件了，用法也不是很復雜，在此記錄一下
需要引入jquery插件，我之前用的是1.7.2的版本，2.0.2的版本測試也可以用，以及printPage插件[https://github.com/posabsolute/jQuery-printPage-plugin]
在頁面中引用頭文件

再用超鏈接觸發打印，需要綁定一個事件

添加事件腳本

當然，也可以不用超鏈接來處理，printPage插件主面上有說明，可以通過擴展printPage(){}方法來指定，詳情可參考如上發的github項目主頁
在datatable.html里寫需要打印的頁面，字體大小，顏色等控制，表格線條等用CSS就可以處理了，如果需要控制打印寬度，可以在body里第一層做一個CSS固定寬度

以及頁面元素部分

如果有需要強制分頁的部分，可以用CSS控制，如

在頁面中寫入該樣式，如同在word中插入一個分頁符
至此，主要流程已描述完畢，經在Chrome中測試，效果很不錯，客戶端也不需要安裝軟件，達到效果

不知道怎么在blogjava里添加附件，下面附上DEMO代碼
printdemo目錄下有如下內容

│  demo.html
│
├─js
│      jquery-2.0.2.min.js
│      jquery.printPage.js
│
└─print
        datatable.html

demo.html文件內容如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Print Demo</title>
    <script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.printPage.js"></script>
    <script>
    $(document).ready(function() {
        $(".btnPrint").printPage();
    });
    </script>
</head>
<body>
    <a class="btnPrint" href='print/datatable.html'>直接打印</a>
</body>
</html>

datatable.html文件內容如下

<html>
<head>

<title>打印頁面</title>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<style>
.print-area {
    width: 750px;
}
.label {
    text-align: center;
    font-weight: bolder;
}
.titlebar {
    height: 20px;
    text-align: center;
}
.datatable {
    border: solid black 1px;
}
table {
    border-collapse: collapse;
}
td {
    font-size: 10pt;
}
</style>

</head>
<body>

    <div class="print-area">

        <div class="titlebar">
            <I><b>入庫單</b></I>
        </div>

  <table width="100%" class="datatable" border="1">
      <tr>
          <td class="label" colspan="2" width="10%">項目名稱</td>
          <td>入庫測試項目</td>
          <td class="label">倉庫名稱</td>
          <td colspan="3">倉庫測試名稱</td>
          <td class="label">入庫時間</td>
          <td width="12%" align="center">2015-06-22</td>
      </tr>
      <tr class="label">
          <td width="5%">序號</td>
          <td colspan="2">物資名稱</td>
          <td>規格型號</td><td>計量單位</td><td>單價</td><td>本次入庫數量</td><td>金額</td><td>備注</td>
      </tr>
    <tr>
        <td align="center">1</td>
        <td colspan="2">混凝土</td>
        <td>C20</td>
        <td>立方</td>
        <td align="right">340</td>
        <td align="right">72</td>
        <td align="right">24,480</td>
        <td></td>
    </tr>
    <tr>
        <td align="center">2</td>
        <td colspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td align="right"></td>
        <td></td>
    </tr>
    <tr>
        <td align="center">3</td>
        <td colspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td align="right"></td>
        <td></td>
    </tr>
    <tr>
        <td align="center">4</td>
        <td colspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td align="right"></td>
        <td></td>
    </tr>
    <tr>
        <td align="center">5</td>
        <td colspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td align="right"></td>
        <td></td>
    </tr>
    <tr>
        <td align="center">6</td>
        <td colspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td align="right"></td>
        <td></td>
    </tr>
    <tr>
        <td align="center">7</td>
        <td colspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td align="right"></td>
        <td></td>
    </tr>
    <tr>
        <td align="center">8</td>
        <td colspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td align="right"></td>
        <td></td>
    </tr>
    <tr>
        <td align="center">9</td>
        <td colspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td align="right"></td>
        <td></td>
    </tr>
    <tr>
        <td align="center">10</td>
        <td colspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td align="right"></td>
        <td></td>
    </tr>
    <tr>
        <td class="label">合計</td>
        <td colspan="7" align="right">24,480</td>
        <td></td>
    </tr>
      <tr>
          <td class="label" colspan="2" rowspan="2">注意事項</td>
          <td colspan="7">1、白聯：存根                     紅聯：財務聯                   黃聯：審核聯</td>
      </tr>
      <tr>
          <td colspan="7">2、出入庫過程每個環節需相關負責人核對無誤后簽字</td>
      </tr>
    </table>

    <table width="100%">
        <tr>
            <td width="30%">庫管：測試庫管(簽字)</td>
            <td width="30%">收貨人：(簽字)</td>
            <td width="30%">經辦人：測試庫管(簽字)</td>
            <td align="right">第1/1頁</td>
        </tr>
    </table>

    </div>
</body>
</html>

JS的庫就不貼了，網上都能找到
?。。∽⒁猓。?！
如果是文件方式在瀏覽器中打開，可能會有無法打印的問題（Edge中可以，Chrome和IE中會無法打?。?，需要部署到服務器端，通過域名或IP地址訪問進行測試

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 使用Maven創建項目模板 Tomcat配置cgi運行python腳本網頁語音播報的實現 Tomcat+Eclipse環境下使用Jenkins2.38搭建持續集成(CI)環境 jQuery打印插件printPage JSP靜態化HTML筆記 MyBatis代碼生成工具mybatis-generator的使用初試MyBatis 浮動QQ客服的實現將數據源的連接配置改為從配置文件讀取

藏經閣

jQuery打印插件printPage

日歷

常用鏈接

留言簿(4)

文章分類

文章檔案

搜索

最新評論

閱讀排行榜

評論排行榜