posts - 2, comments - 27, trackbacks - 0, articles - 60
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

jQuery打印插件printPage

Posted on 2016-11-29 11:53 ZhouFeng 阅读(2329) 评论(0)  编辑  收藏 所属分类: Web开发
因最近项目中要用到打印，研究了一些打印方案，考虑过生成PDF再打印的方案，只是客户端需要安装程序，内容输出的控制不太方便，在网上找了一些稍微轻量级的插件来做，项目中有用到jQuery，便尝试了一下printPage打印插件，其它的没有花时间去对比，这个插件能满足需要，对输出内容控制也方便，就是一个HTML页面，也就确定用这个插件了，用法也不是很复杂，在此记录一下
需要引入jquery插件，我之前用的是1.7.2的版本，2.0.2的版本测试也可以用，以及printPage插件[https://github.com/posabsolute/jQuery-printPage-plugin]
在页面中引用头文件
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.printPage.js"></script>
再用超链接触发打印，需要绑定一个事件
<a class="btn btn-default btnPrint" href='print/datatable.html'><span class="glyphicon glyphicon-print" aria-hidden="true"></span>&nbsp;直接打印</a>
添加事件脚本
<script>  
$(document).ready(function() {
    $(".btnPrint").printPage();
});
</script>
当然，也可以不用超链接来处理，printPage插件主面上有说明，可以通过扩展printPage(){}方法来指定，详情可参考如上发的github项目主页
在datatable.html里写需要打印的页面，字体大小，颜色等控制，表格线条等用CSS就可以处理了，如果需要控制打印宽度，可以在body里第一层做一个CSS固定宽度
<style>
.print-area {
    width: 750px;
}

.label {
    text-align: center;
    font-weight: bolder;
}

.titlebar {
    height: 10px;
    text-align: center;
}

.datatable {
    border: solid black 1px;
}

table {
    border-collapse: collapse;
}

td {
    font-size: 10pt;
}
</style>
以及页面元素部分
<body>
    <div class="print-area">
        ......
    </div>
</body>
如果有需要强制分页的部分，可以用CSS控制，如
<div style="page-break-after:always"></div>
在页面中写入该样式，如同在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++博客   博问