【web打印】之jsprint

js引用

<!-- <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> --><script src="/js/js/jquery.jqprint-0.3.js"></script><script src="https://cdn.bootcss.com/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>

页面css引用

//此处引用专为print准备的css样式，在link标签的最后增加media="print"属性<link rel="stylesheet" href="http://localhost:8080/js/debug/lib/layer/css/layui.css" type="text/css" media="print"/>

页面元素

设置了隐藏元素，只在打印的时候显示里面的内容

<div id= "printTemplate" style="display:none">        <div id = "printInfo" >            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;text-align: center">                <legend>材料入库单</legend>            </fieldset>            <form class="layui-form" action="">                <div class="layui-form-item">                    <div class="layui-inline">                        <label class="layui-form-label">供应商</label>                        <div class="layui-input-inline">                        <input type="text" name="title" lay-verify="title" autocomplete="off" value="瓜州县北干沟顺达砂石料" class="layui-input">                        </div>                    </div>                    <div class="layui-inline">                        <label class="layui-form-label">库房名称</label>                        <div class="layui-input-inline">                        <input type="text" name="title" lay-verify="title" autocomplete="off" value="1号拌合站" class="layui-input">                        </div>                    </div>                    <div class="layui-inline">                        <label class="layui-form-label">收料部门</label>                        <div class="layui-input-inline">                        <input type="text" name="title" lay-verify="title" autocomplete="off" value="项目经理部" class="layui-input">                        </div>                    </div>                </div>                <div class="layui-form-item">                    <div class="layui-inline">                        <label class="layui-form-label">单据号</label>                        <div class="layui-input-inline">                        <input type="text" name="title" lay-verify="title" autocomplete="off" value="17入字CR170300002号" class="layui-input">                        </div>                    </div>                    <div class="layui-inline">                        <label class="layui-form-label">日期</label>                        <div class="layui-input-inline">                        <input type="text" name="title" lay-verify="title" autocomplete="off" value="2017年08月7日" class="layui-input">                        </div>                    </div>                </div>                  <table class="layui-table" style="text-align: center">                    <colgroup>                      <col width="150">                      <col width="250">                      <col width="100">                      <col width="100">                      <col width="100">                      <col width="100">                      <col width="200">                      <col>                    </colgroup>                    <thead>                      <tr>                        <th>材料名称</th>                        <th>规格型号</th>                        <th>单位</th>                        <th>实收数量</th>                        <th>单价</th>                        <th>金额</th>                        <th>备注</th>                      </tr>                     </thead>                    <tbody>                      <tr>                        <td>砾石</td>                        <td>水泥混凝土 10-20mm</td>                        <td>立方米</td>                        <td>2470</td>                        <td>30.10</td>                        <td>74,339.81</td>                        <td></td>                      </tr>                    </tbody>                  </table>            </form>        </div>    </div>

js调用方法

//打印按钮    function printClick() {        $('#printInfo').jqprint({              debug: false,                        importCSS: true,                     printContainer: true,                operaSupport: false              });     }

效果预览