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

您所在的位置:网站首页 火狐浏览器的兼容性舒服 lodop小票打印,兼容ie,谷歌,火狐浏览器

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

2024-07-04 09:42| 来源: 网络整理| 查看: 265

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

在网上看到了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、默认需要点击打印按钮的时候,才去做控件的嗅探。如果需要改成进入页面主动去判断呢?

window.onload = function () { var LODOP = getLodop( document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM') ); if (LODOP) { $('.make-wrap').hide(); } else { $('.make-wrap').hide(); } };

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

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3