web-printer-with-Lodop/index.html at master · whorusq/web-printer-with-Lodop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打印测试 - 基于 Lodop</title>
    <style type="text/css">
        /* layer 弹窗自定义样式 */
        body .layui-layer-zs {  }
        body .layui-layer-zs .layui-layer-title { font-family: "Microsoft Yahei"; color:#fff; border: none; background: url('./assets/images/layui-layer-title-info.png') no-repeat 10px center #5EAFF6; padding-left: 40px; }
        body .layui-layer-zs .layui-layer-content { font-family: "Microsoft Yahei";  }
        body .layui-layer-zsh300 .layui-layer-content { max-height: 300px; }
        body .layui-layer-zs-download a { color: #f6a41b; }
        body .layui-layer-zs-download a:hover {  text-decoration: underline; }
        body .layui-layer-zs .layui-layer-content .oktips { font-size: 14px; }
        body .layui-layer-zs .layui-layer-content .oktips p:first-child { color: #ac7212; }
        body .layui-layer-zs .layui-layer-content .oktips b { font-weight: normal; color: #ff4c4c; }
        body .layui-layer-zs .layui-layer-setwin { background: url('./assets/images/layui-layer-title-close.png') no-repeat center; }
        body .layui-layer-zs .layui-layer-setwin:hover { background: url('./assets/images/layui-layer-title-close-hover.png') no-repeat center; }
        body .layui-layer-zs .layui-layer-ico { background: none; }
        body .layui-layer-zs .layui-layer-btn .layui-layer-btn0 { background: url('./assets/images/layer-btn-ok.png') no-repeat; width: 74px; height: 32px; border: none; margin: 0; padding: 0; }
        body .layui-layer-zs .layui-layer-btn .layui-layer-btn0:hover { background: url('./assets/images/layer-btn-ok-hover.png') no-repeat; }
        body .layui-layer-zs .layui-layer-padding { padding: 20px; }
    </style>
</head>
<body>

<div style="width: 10%; margin: 0 auto; line-height: 100px">
    <input type="button" name="" id="printShippingBill" value="打印预览">
</div>

<script src="assets/jquery.min.js"></script>
<script src="assets/my.js"></script>
<script src="assets/jquery.tmpl.js"></script>
<script src="assets/layer/layer.js"></script>
<script src="assets/lodop/LodopFuncs.js"></script>
<!-- 打印模版：发运单 -->
<script id="tmpl_print" type="text/x-jquery-tmpl">
    <div id="print-header">
        <table class="header" cellpadding="0" cellspacing="0" style="width: 99%;">
            <tr>
                <td align="center" colspan="3">
                    <div style="width: 100%;height: 110px;position: relative;">
                        <span style="display: block;position: absolute;top: 0;left: 0;">
                            <!-- 供应商 Logo -->
                            {{if data.logo}}
                            <img src="{{= data.logo}}" width="110" height="110">
                            {{/if}}
                        </span>
                        <h2 style="width: 60%;margin:0 auto;line-height: 80px;">{{= data.supplierInfo.companyName}} 送货单</h2>
                        <span style="display: block;position: absolute;top: 0;right: 0;">
                            <!-- 发运单二维码 -->
                            {{if data.expressQRcode}}
                            <img src="{{= data.expressQRcode}}" width="110" height="110">
                            {{/if}}
                        </span>
                    </div>
                </td>
            </tr>
            <tr>
                <td width="40%"><b>地址：</b>{{= data.supplierInfo.address.substring(0,25)}}</td>
                <td><b>电话：</b>{{= data.supplierInfo.mobilePhone}}</td>
                <td><b>传真：</b>{{= data.supplierInfo.fax}}</td>
            </tr>
            <tr>
                <td><b>客户名称：</b>{{= data.buyerInfo.companyName}}</td>
                <td><b>订单编号：</b>{{= data.order.code}}</td>
                <td><b>下单时间：</b>{{= toFormatDate(data.order.createAt, 'yyyy.MM.dd')}}</td>
            </tr>
            <tr>
                <td><b>收货地址：</b>{{= data.order.address.substring(0,25)}}</td>
                <td><b>发货单号：</b>{{= data.code}}</td>
                <td><b>发货日期：</b>{{= toFormatDate(data.createAt, 'yyyy.MM.dd')}}</td>
            </tr>
        </table>
    </div>
    <div id="print-body">
        <table class="body" cellpadding="0" cellspacing="0" style="width: 99%; ">
            <thead>
                <tr>
                    <th width="8%">医院商品编码</th>
                    <th width="18%">医院商品名称</th>
                    <th width="15%">规格型号</th>
                    <th width="17%">生产企业</th>
                    <th width="5%">生产批号</th>
                    <th width="5%">商品有效期</th>
                    <th width="5%">单位</th>
                    <th width="8%">单价（元）</th>
                    <th width="5%">发运数量</th>
                    <th width="8%">总价（元）</th>
                    <th width="5%">收货数量</th>
                </tr>
            </thead>
            <tbody>
                {{each(i,item) data.waybillDetails}}
                <tr>
                    <td>{{= showCode}}</td>
                    <td>{{= showName}}</td>
                    <td>{{= sepecification}}</td>
                    <td>{{= manufacturer}}</td>
                    <td align="center">{{= batch}}</td>
                    <td align="center">{{= toFormatDate(expireTime, 'yyyy.MM.dd')}}</td>
                    <td align="center">{{= unit}}</td>
                    <td align="right">{{= toFormatMoney(price, 3)}}</td>
                    <td align="center">{{= sendNum}}</td>
                    <td align="right">{{= toFormatMoney(totalPrice, 3)}}</td>
                    <td align="center">{{= getNum}}</td>
                </tr>
                {{/each}}
            <tbody>
            <tfoot>
                <tr>
                    <td>本页小计</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td align="center" tdata="subSum">###</td>
                    <td align="right" tdata="subSum" format="#,##0.000">######</td>
                    <td align="center" tdata="subSum">###</td>
                </tr>
                <tr>
                    <td>合计</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td align="center">{{if data.allNum}}{{= data.allNum}}{{else}}0{{/if}}</td>
                    <td align="right">{{= toFormatMoney(data.allMoney, 3)}}</td>
                    <td align="center">{{if data.allgetNum}}{{= data.allgetNum}}{{else}}0{{/if}}</td>
                </tr>
            </tfoot>
        </table>
    </div>
    <div id="print-footer">
        <table class="footer" cellpadding="0" cellspacing="0" style="width: 99%;">
            <tr>
                <td width="40%"><b>金额合计（大写）：</b>{{= toUpperMoney(data.allMoney)}}</td>
                <td colspan="2"><b>备注：</b></td>
            </tr>
            <tr>
                <td><b>制单人：</b>{{= data.printBy}}</td>
                <td><b>运输方式：</b>{{= data.expressName}}</td>
                <td><b>发货人：</b></td>
            </tr>
            <tr>
                <td><b>配送人：</b>{{= data.deliveryPerson}}</td>
                <td><b>发货时温湿度：</b></td>
                <td><b>收货时温湿度：</b></td>
            </tr>
            <tr>
                <td><b>配送人联系电话：</b>{{= data.deliveryContact}}</td>
                <td><b>收货人：</b></td>
                <td><b>收货时间：</b></td>
            </tr>
        </table>
    </div>
    <div id="print-pages">
        <p style='text-align:center;font-size:12px;'>
            页码：<span tdata='pageNO'>第 ## 页</span> / <span tdata='pageCount'>共 ## 页</span>
        </p>
    </div>
</script>
<!-- // end 打印模版：发运单 -->
<script>
$(function() {

    // 打印发运单
    $('#printShippingBill').on('click', function(event) {

        // 获取待打印数据
        var data = {};
        var loading = layer.load(0, {shade: [0.1, '#000']});
        $.ajax({
            type: 'post',
            url: 'data.json', // 这里是处理过的演示数据
            // data: {id: '{:I("get.id")}'},
            async: true,
            dataType: 'json',
            success: function(result) {
                if (result.status == 200 && result.retData) { // 渲染模版、打印
                    setTimeout(function() {
                        layer.close(loading); // 渲染数据到弹出打印预览，有1秒延迟，此处 loading 也延迟 1ms 关闭
                    }, 5000);

                    // 数据、打印组件初始化
                    $('#print-area').remove();
                    $('<div></div>').prop('id', 'print-area').hide().appendTo('body');
                    $("#tmpl_print").tmpl({data: result.retData}).appendTo('#print-area');
                    var strBodyStyle='<style>body { margin: 0; padding: 0; border: 0;} table tr { font-size: 12px; line-height: 20px; }' +
                        'table.body  { border-bottom: 1px solid #666; border-right: 1px solid #666; } table.body th,table.body ' +
                        'td { border-left: 1px solid #666; border-top: 1px solid #666; font-weight: normal; padding: 1px; }' +
                        'table.body td { padding: 0 5px; } table.header tr, table.footer tr { font-size: 14px; } </style>';
                    LODOP = getLodop();
                    if (!LODOP) {
                        return false;
                    }
                    LODOP.PRINT_INIT("");
                    LODOP.SET_PRINT_PAGESIZE(2,0,0,"A4"); // 0 操作者自行决定或打印机缺省设置 1 纵向打印，固定纸张；2 横向打印，固定纸张
                    // LODOP.SET_PREVIEW_WINDOW(1,0,0,1000,600,""); // 初始预览窗口大小
                    LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED",1); // 横向打印时正向显示
                    LODOP.SET_SHOW_MODE("HIDE_PAPER_BOARD",1); // 去除背景滚动线
                    LODOP.SET_PRINT_MODE("AUTO_CLOSE_PREWINDOW",1); // 打印后自动关闭预览
                    LODOP.SET_PRINT_MODE("CUSTOM_TASK_NAME","发运单打印"); // 打印队列中的文档名

                    // 追加打印头部
                    LODOP.ADD_PRINT_TABLE(5,5,"100%",180,strBodyStyle + $('#print-header').html());
                    LODOP.SET_PRINT_STYLEA(0,"ItemType",1); // 页眉页脚项

                    // 追加打印主体：分页、循环表格
                    LODOP.ADD_PRINT_TABLE(185,5,"100%",370, strBodyStyle + $('#print-body').html());
                    // LODOP.SET_PRINT_STYLEA(0,"Vorient",3);

                    // 追加打印底部
                    LODOP.ADD_PRINT_TABLE(570,5,"100%",150,strBodyStyle + $('#print-footer').html());
                    LODOP.SET_PRINT_STYLEA(0,"ItemType",1); // 页眉页脚项
                    LODOP.SET_PRINT_STYLEA(0,"LinkedItem",2);

                    LODOP.NewPageA();

                    // 追加页码
                    LODOP.ADD_PRINT_HTM(745,5,"100%",15,$('#print-pages').html());
                    LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
                    // LODOP.SET_PRINT_STYLEA(0,"LinkedItem",3);
                    LODOP.SET_PRINT_STYLEA(0,"Horient",1);

                    LODOP.PREVIEW();
                }
            }
        });
    });


});
</script>
</body>
</html>