【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      
        }); 
    }

效果预览