lodop小票打印，兼容ie，谷歌，火狐浏览器

单位有一套收银系统，结算完成需要进行小票打印备份。

在网上看到了lodop的实现方式，翻阅了官方一些资料，最后决定使用lodop来做开发。

官网地址：http://www.lodop.net/index.html，官方有很多demo小例，可以以自己的需求对应来找。如果还是无法解决，可以考虑加入官网qq群来请求帮助，减少自己摸索的时间。

我这边才用的是超文本方式做的打印。

开发需要用到window系统电脑，安装小票打印驱动程序。

具体开发步骤如下：

1、新建index.html，编写自己需要打印的html节点，可以动态来做dom节点内容的插入。

code使用原生，使用的时候看自己要兼容到哪种浏览器。

头部需要引入lodopFuncs.js来做浏览器，控件是否安装的相关嗅探。

2、lodop打印相关代码如下

            var LODOP; //声明为全局变量

            var btn = document.getElementById('print_btn');

            btn.onclick = function () {
                prn_preview1();
            };

            function print1() {
                CreateOnePage();
                LODOP.PRINT();
            }

            function printSet1() {
                CreateOnePage();
                LODOP.PRINT_SETUP();
            }

            function prn_preview1() {
                CreateOnePage();
                LODOP.SET_PREVIEW_WINDOW(1, 0, 0, 0, 0, '');
                LODOP.PREVIEW();
                //        LODOP.PREVIEW();
                //        LODOP.PRINT();
                //        LODOP.PRINT_SETUP();
            }

            // 选择打印机
            function MySelect() {
                LODOP = getLodop();
                LODOP.SELECT_PRINTER();
            }

            function CreateOnePage() {
                LODOP = getLodop();
                LODOP.PRINT_INIT('订单小票打印');
                LODOP.SET_PRINT_PAGESIZE(3, '58mm', '210mm', '');
                LODOP.ADD_PRINT_HTM(
                    0,
                    0,
                    '100%',
                    '100%',
                    document.getElementById('div01').innerHTML
                );
                LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Auto-Width');
                LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 0, 0, '');
            }

            // 获取打印机列表
            function getPrintNameList() {
                LODOP = getLodop();
                var printerCount = LODOP.GET_PRINTER_COUNT();

                // 只是在为了测试在双向绑定时可不可以赋值之后打印。
                for (var i = 0; i < printerCount; i++) {
                    console.log(LODOP.GET_PRINTER_NAME(i));
                }
            }

            // 指定打印机
            function PreviewByPrinterName(strPrinterName) {
                CreateOnePage();
                if (LODOP.SET_PRINTER_INDEXA(strPrinterName)) LODOP.PREVIEW();
            }

            // 设置打印机的打印张数
            function PrintMoreCopies(intCopies) {
                CreateOnePage();
                if (LODOP.SET_PRINT_COPIES(intCopies)) LODOP.PRINT();
                else alert('设置打印份数失败！');
            }

点击按钮的时候来做lodop插件的调起，创建function中，可以做打印相关初始化：比如打印纸张大小，打印机的默认选择，打印视图方式等，具体相关初始化函数，可以参考官网demo。需要注意的点是，因为项目选择的是超文本打印，所以需要我们去传入一个dom节点。这个节点包括，css样式以及我们需要打印的dom节点内容。如果不传css样式的话，打印出的小票是没有样式的。

遇到的问题：

1、如果遇到项目中用到table，给宽度也无法换行的情况，需要先添加一定的宽度，然后添加

word-break: break-all;

来做td内容的换行。

2、默认需要点击打印按钮的时候，才去做控件的嗅探。如果需要改成进入页面主动去判断呢？

 <script type="text/javascript">
        window.onload = function () {
            var LODOP = getLodop(
                document.getElementById('LODOP_OB'),
                document.getElementById('LODOP_EM')
            );
            if (LODOP) {
                $('.make-wrap').hide();
            } else {
                $('.make-wrap').hide();
            }
        };
    </script>

我是这样做的，在页面末尾添加。在网页加载完毕后，去做lodop初始化获取，来做唤醒odopFuncs.js中嗅探，如果没安装控件就会做相关提示或者更新。

至此，小票打印的功能页面就完成了。