1. 程式人生 > >列印控制元件lodop

列印控制元件lodop

 lodop官網地址:http://www.lodop.net/index.html

在使用lodop控制元件之前,請先安裝官網上自帶的.exe執行檔案,然後再html中引入LodopFuncs.js

控制元件的原理是將html以及其樣式,也就是獲取前端頁面,將其填充到列印控制元件中,直接列印需要授權

    let scenelist = {
        dv: $("#scenelist"),
        ini: function () {
            let that = this;
            this.dv.on('click', 'a,button,.btns', function () {
                const v = $(this).data('command');
                if (v == 'printscene') {//列印單個
                    let id = $(this).data('id');
                    that.printscene(id);
                }else if(v=='printscenes'){//批量列印
                    let checked = $('.table input[type="checkbox"]:checked');
                    let ids = checked.serializeArray();
                    for(let i=0;i<ids.length;i++){
                        that.printscene(ids[i].value);
                    }
                }
            });
        },
        printscene: function (id) {
            let that = this;
            $.ajax({
                type: "post",
                url: '/admin/scene/scenePrint2',
                data: {scene_id: id},
                dataType: "json",
                success: function (data) {
                    let str = "<div style=\"float:left;width:100px;word-wrap:break-word; \">" + data.member_name + "<br>" +
                        data.customer_name + "<br>" + data.restaurant + "<br>" + data.material + "<br>" + data.num + "份<br>" + "</div>" + "<div style=\"float:left;\">" +
                        "<img src=\"__ROOT__/upload/extend/qrcode/" + data.qrcodename + "\" width=\"120\" height=\"120\"></div>";
                    that.create_page(str);
                }
            })
        },
        create_page: function (str) {
            var LODOP = getLodop();
            LODOP.SET_PRINT_STYLEA(2, "FontSize", 18);
            LODOP.SET_PRINT_STYLEA(2, "Bold", 1);
            LODOP.ADD_PRINT_HTM(0, 10, "100%", "100%", str);
            //LODOP.PRINT()
            LODOP.PREVIEW();
        }
    }
    scenelist.ini();