web页面通过JS调用Lodop控件打印小票代码-前端撸码笔记

2017-03-30吐槽：现在再看这些代码，我这都是写了些啥啊。。。但当时仿佛真的是成就满满。。。

————————-

引用 Lodop控件的js

//html代码

读取数据库拼成字符串，用 **## 来分割，一行一个数据，里面涉及到php读取数据库的代码

<div id="xiaopiaocon1">
========================================**##
交易单号:<?php echo $ExchNo;?>**##
取衣时间:<?php echo $takedate;?>**##
顾客姓名:<?php echo $order.custname;?>**##
顾客电话:<?php echo $order.phone;?>**##
========================================**##
名称 颜色 工艺 数量 价格**##
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂**##
<?php foreach(array_name as $value){?><?php echo $d.clothesname;?>*|* 
<?php echo $d.color;?>*|* 
<?php echo $d.servicename;?>*|* 
<?php echo $d.unitsum;?>*|* 
<?php echo $d.trueprice;?>*|*
**##
品牌(<?php echo $d.Brand;?>=ppff=附件(<?php echo $d.Appendix;?>)=ppff=**##
瑕疵(<?php echo $d.SlightDefect;?>)**##
----------------------------------------**##
<?php}?>
总件数:<?php echo $order.clothescnt;?>件**##
总额:<?php echo $order.ExchMoney;?>元 (附加费:<?php echo $fjmoney;?>元)**##
应收金额:<?php echo $order.ExchMoney;?>元**##
实收金额:<?php echo $order.ExchMoney;?>元**##
【已付款】##****##
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂**##
地址:<?php echo $employee.area;?><?php echo $employee.address;?>=add=**##
服务热线:<?php echo $employee.tel;?>**##
操作员:<?php echo $employee.name;?> 店名:<?php echo $employee.shopname;?>**##
打印时间:<time></time>**## 
======================================**##
本店声明:**##
1.取衣凭据,请妥善保管,丢失请自带身**##份证到店取衣。**##
2.洗衣免费保管时长为72小时,请按时取**##
衣,超时每24小时加收1元的服装保管费。**##
3.您的满意是我们最大的追求！**##
感谢您对e奢坊的信赖和支持！**##
======================================**##
</div>
<div id="xiaopiaotiaoxingma">
<?php echo $ExchNo;?></div>

//js代码

<script language="javascript" type="text/javascript">
    window.onload = function () {
        xiaopiaoprint();//页面加载后打印
        xiaopiaopreview();//页面加载后预览
    };
    var myDate = new Date();
    var dayinshijian = myDate.getFullYear() + "/" + myDate.getMonth() + "/" + myDate.getDate() + " " + myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();//拼接处打印时间 
    var LODOP; //声明为全局变量 
    function xiaopiaoprint() {
        Create("财务联");
        LODOP.PRINT();
        setTimeout(function () {
            Create("客户联");
            LODOP.PRINT();
            setTimeout(function () {
                Create("客户联");
                LODOP.PRINT();
            }, 5000);
        }, 5000);//此处是延时打印 
    }

    function xiaopiaopreview() {
        Create("客户联");
        LODOP.PREVIEW();
    }

    function Create(type) {//往下就不做注释了 累。。。慢慢看吧。。。 
        var xiaopiaotiaoxingma = document.getElementById("xiaopiaotiaoxingma").innerHTML;
        var xiaopiaocon = document.getElementById("xiaopiaocon1").innerHTML;
        xiaopiaocon = xiaopiaocon.replace("<time><\/time>", dayinshijian);
        if (type == "财务联") {
            xiaopiaocon = xiaopiaocon + "顾客签字:=qz=**##";
        }
        var margintop = 10;
        LODOP = getLodop();
        LODOP.ADD_PRINT_IMAGE(margintop, 0, 180, 60, "<img src=\"statics/images/xiaopiaologo.jpg?v=2\" width=\"180\" height=\"60\"/>");
        LODOP.ADD_PRINT_TEXT(margintop, 52, 190, 0, "e奢坊洗衣凭据");
        LODOP.SET_PRINT_STYLE("FontSize", 10);
        LODOP.SET_PRINT_STYLE("FontName", "黑体");
        LODOP.ADD_PRINT_TEXT(margintop + 70, 20, 190, 0, type + " (洗衣凭据)");
        LODOP.ADD_PRINT_BARCODE(margintop + 70 + 20, 20, 190, 45, "128A", xiaopiaotiaoxingma);
        LODOP.SET_PRINT_STYLE("FontSize", 7);
        var xiaopiaoconarr = xiaopiaocon.split("**##");
        var len = xiaopiaoconarr.length;
        var i;
        var eachHeight = margintop + 70 + 20 + 60;
        for (i = 0; i < len; i++) {
            if (xiaopiaoconarr[i].indexOf("*|*") > 0) {//这里的主要目的是判断读取数据库的数据长度，如果长度太长，导致换行的话，就按两行或者多行显示。 
                var orderarr = xiaopiaoconarr[i].split("*|*");
                var thisheight;
                if (orderarr[0].length <= 4 && orderarr[1].length <= 3 && orderarr[2].length <= 4) {//单行 备注 这里以及后面的4、3、8等等数字是我根据我自己设置的宽度以及字体大小测试得到的，大家借鉴的时候不要生搬硬套 
                    thisheight = 10;
                    LODOP.ADD_PRINT_TEXT(eachHeight, 0, 49, thisheight, orderarr[0]);
                    LODOP.ADD_PRINT_TEXT(eachHeight, 50, 44, thisheight, orderarr[1]);
                    LODOP.ADD_PRINT_TEXT(eachHeight, 90, 49, thisheight, orderarr[2]);
                    LODOP.ADD_PRINT_TEXT(eachHeight, 126, 24, thisheight, orderarr[3]);
                    LODOP.ADD_PRINT_TEXT(eachHeight, 155, 24, thisheight, orderarr[4]);
                    eachHeight = eachHeight + 10;
                } else if (orderarr[0].length > 4 && orderarr[0].length <= 8 && orderarr[1].length > 3 && orderarr[1].length <= 6 && orderarr[2].length > 4 && orderarr[2].length <= 8) {//两行 
                    thisheight = 20;
                    LODOP.ADD_PRINT_TEXT(eachHeight, 0, 49, thisheight, orderarr[0]);
                    LODOP.ADD_PRINT_TEXT(eachHeight, 50, 44, thisheight, orderarr[1]);
                    LODOP.ADD_PRINT_TEXT(eachHeight, 90, 49, thisheight, orderarr[2]);
                    LODOP.ADD_PRINT_TEXT(eachHeight, 126, 24, thisheight, orderarr[3]);
                    LODOP.ADD_PRINT_TEXT(eachHeight, 155, 24, thisheight, orderarr[4]);
                    eachHeight = eachHeight + 10;
                } else {//多行 
                    thisheight = 30;
                    LODOP.ADD_PRINT_TEXT(eachHeight, 0, 49, thisheight, orderarr[0]);
                    LODOP.ADD_PRINT_TEXT(eachHeight, 50, 44, thisheight, orderarr[1]);
                    LODOP.ADD_PRINT_TEXT(eachHeight, 90, 49, thisheight, orderarr[2]);
                    LODOP.ADD_PRINT_TEXT(eachHeight, 126, 24, thisheight, orderarr[3]);
                    LODOP.ADD_PRINT_TEXT(eachHeight, 155, 24, thisheight, orderarr[4]);
                    eachHeight = eachHeight + 30;
                }
            } else if (xiaopiaoconarr[i].indexOf("=ppff=") > 0) {
                var orderarr = xiaopiaoconarr[i].split("=ppff=");
                if ((orderarr[0] + " ").length + orderarr[1].length >= 18) {
                    LODOP.ADD_PRINT_TEXT(eachHeight, 0, 190, 0, orderarr[0]);
                    eachHeight = eachHeight + 10;
                    LODOP.ADD_PRINT_TEXT(eachHeight, 0, 190, 0, orderarr[1]);
                } else {
                    LODOP.ADD_PRINT_TEXT(eachHeight, 0, 190, 0, orderarr[0] + " " + orderarr[1]);
                }
                eachHeight = eachHeight + 10;
            } else if (xiaopiaoconarr[i].indexOf("=add=") > 0) {
                var orderarr = xiaopiaoconarr[i].split("=add=");
                if (orderarr[0].length >= 18) {
                    LODOP.ADD_PRINT_TEXT(eachHeight, 0, 190, 0, orderarr[0].substr(0, 16));
                    eachHeight = eachHeight + 10;
                    LODOP.ADD_PRINT_TEXT(eachHeight, 0, 190, 0, orderarr[0].substr(16, orderarr[0].length));
                } else {
                    LODOP.ADD_PRINT_TEXT(eachHeight, 0, 190, 0, orderarr[0]);
                }
                eachHeight = eachHeight + 10;
            } else if (xiaopiaoconarr[i].indexOf("##**") > 0) {
                var orderarr = xiaopiaoconarr[i].split("##**");
                LODOP.SET_PRINT_STYLE("FontSize", 8.5);
                LODOP.ADD_PRINT_TEXT(eachHeight - 10, 100, 100, 0, orderarr[0]);
                LODOP.SET_PRINT_STYLE("FontSize", 7);
                eachHeight = eachHeight;
            } else if (xiaopiaoconarr[i].indexOf("=qz=") > 0) {
                var orderarr = xiaopiaoconarr[i].split("=qz=");
                LODOP.SET_PRINT_STYLE("FontSize", 8.5);
                LODOP.ADD_PRINT_TEXT(eachHeight, 0, 100, 100, orderarr[0]);
                LODOP.SET_PRINT_STYLE("FontSize", 7);
                eachHeight = eachHeight + 100;
            } else {
                LODOP.ADD_PRINT_TEXT(eachHeight, 0, 190, 0, xiaopiaoconarr[i]);
                eachHeight = eachHeight + 10;
            }
        }
        LODOP.SET_PRINT_PAGESIZE(0, 580, (eachHeight + 30) * 2.6458, "");
        i = null;
    }
</script>

其实也可以用Lodop的 ADD_PRINT_HTM方法来打印，但是 ADD_PRINT_HTM方法貌似不能调整字体大小，所以我只能用拼接拆分字符串的方式一行一行的打印。如果有高手知道怎么用 ADD_PRINT_HTM 方法来调整字体大小的方法，还望指点一下小生。

代码乱七八糟，望大牛们多多指点。

Lodop免费版直接打印的时候会带水印。暂时没找到去掉的办法。

未经允许不得转载：前端撸码笔记 » web页面通过JS调用Lodop控件打印小票代码

内容推荐