网页H5实现 美团接单 连接打印机打印客户下单信息
2024-04-11 23:07:32
1,首先映入jQuery插件 连接打印机 需要使用到JavaScript中window.print()方法把要打印的内容包裹在 ，通过开始、结束标记<!--startprint--> <!--endprint-->
<!--startprint-->
要打印的内容
<!--endprint-->2，使用jQuery拿到元素实现数据绑定 拿到后台返回数组 循环渲染到页面
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外卖打印</title></head><style>.waimai{text-align: left;border-bottom: 1px solid #000000;}.shopBox{list-style: none;}</style><body><!--startprint--><table class="waimai"><tr style="width: 100%;"><td><span class="zong">天 地 和 外 卖</span> <br /></td></tr><tr><td><span class="xuxian">----------------------</span></td></tr><tr><td><span class="department">科室:<span id="department"></span></span></td></tr><tr><td><span class="department">订单编号:<span id="id"></span></span></td></tr><tr><td><span class="department">姓名:<span id="username"></span></span></td></tr><tr><td><span class="department">电话号码:<span id="mobile_phone"></span></span></td></tr><tr><td><span class="department">下单时间:<span id="order_time_date"></span></span></td></tr><tr><td><audio id="myaudio" src="" controls="controls" autoplay="autoplay" hidden="true" style="display:none"></audio></td> </tr></table><!-- 客户下单信息 --><div id="active"></div><!--endprint--></body><script src="https://cntdh.net/tdh/public/static/admin/style/jquery.js"></script><script src="https://cntdh.net/tdh/public/static/admin/style/jquery_002.js"></script><script src="https://cntdh.net/tdh/public/static/admin/style/bootstrap.js"></script><script src="https://cntdh.net/tdh/public/static/admin/style/beyond.js"></script><script type="text/javascript"> var arr = new Array();var html="";function doPrint() {bdhtml=window.document.body.innerHTML;sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符eprnstr="<!--endprint-->"; //结束打印标识字符串prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTMLwindow.print(); //调用浏览器的打印功能打印指定区域window.document.body.innerHTML=bdhtml; // 最后还原页面}function longPolling() {$.ajax({type: "post",dataType: "json",url: "https://接口地址",timeout: 30000, //超时时间30秒，30秒内没有完成请求，则取消请求然后error回调函数会被调用data: {time: "5"}, //5秒后无论结果服务器都返回数据success: function(data, textStatus) { //返回的回调函数console.log(data.data);arr = data.data;// console.log(data.text.username);console.log(arr);if (data.success == 1) //状态码为200,完全成功才响起提示音{console.log('有数据');$('#department').html(data.text.department);$('#id').html(data.text.id);$('#username').html(data.text.username);$('#mobile_phone').html(data.text.mobile_phone);$('#order_time_date').html(data.text.order_time_date);$.each(arr, function(k,v) {//这里的函数参数是键值对的形式，k代表键名，v代表值html+='<li class="shopBox">'+'<div class="shopListName">菜名:'+arr[k].mun_name+'</div>'+'<div class="shopListName">数量:'+arr[k].goods_num+'</div>'+'<div class="shopPrice">'+'<span class="price">套餐:'+arr[k].separation_class+'</span>'+'</div>'+'</br>'+'</li>'});// $(".shop_box").append(html);$("#active").append(html);doPrint();playsound();}// 未从服务器得到数据，继续查询if (data.success == "0") {//$("#msg").append("<br>[无数据]"); // console.log(evdata);// evdata.data.btn.click();console.log('没有数据');}//也有状态码为204,也是success回调函数，但是textStatus==nocontentsetTimeout(longPolling, 10000); //再发起一个连接请求 },error: function(XMLHttpRequest, textStatus, errorThrow) {if (textStatus == "timeout") //请求超时{setTimeout(longPolling, 10000);} else // 其他错误，如网络错误等{setTimeout(longPolling, 10000);}}});}longPolling();//响起提示音function playsound() {var myAuto = document.getElementById('myaudio');myAuto.src = "https://cntdh.yinxiao1323.mp3";arr = ''; //清空数组html=""; //清空渲染出来的 客户下单信息 console.log(arr);setTimeout(a, 10000); //再发起一个连接请求 }//移除客户下单详细信息divfunction a(){ $("#active").empty();}</script>
</html>
网页H5实现 美团接单 连接打印机打印客户下单信息相关推荐
- 自己的电脑不能连接打印机打印怎么办
近来,自己购买了一台小型的打印机,原本想着打印一些比较简单的东西,可是没有想到使用过程中困难多多,卡纸.打印字迹不清晰等问题一件件接着来,我开始怀疑难道我购买的打印机质量太差劲了吗? 相信不少人在打印 ...
- python连接打印机打印文档、图片、pdf文件等
引言 python连接打印机进行打印,可能根据需求的不同,使用不同的函数模块. 如果你只是简单的想打印文档,比如office文档,你可以使用ShellExecute方法,对于微软office的文档.p ...
- Secure CRT自动连接打印机打印乱码问题
最近发现了一件怪事,发现自己的电脑会自动连接打印机打印文件. 关键是打印出来的都是乱码,一行行的电波文,看的脑阔疼. 刚开始还不知道是什么原有导致的. 后来一狠心把打印机给删除了. 第二天,过了一段时 ...
- 远程计算机打印,win7系统电脑如何远程连接打印机打印文件
打印机设备是办公不可缺少一部分,将有需要的文件打印出来,是很简单一件事情.如果打印机不是连着自己电脑的,这时通常的做法是拿着U盘拷贝到连接打印机的电脑上进行打印,这个方法比较麻烦.其实还有一种很便捷的 ...
- Android 蓝牙连接打印机打印网络图片
实现蓝牙连接打印机打印网络图片 经过自己一下午加一个小时的时间整理出来,希望能帮助到各位码兄弟! 主要分为以下几步: 将网络图片URL转为bitmap :其中需要进行网络请求,不可在主线程中进行,需另 ...
- 关于前端页面连接打印机打印
关于前端连接打印机打印 页面代码 逻辑代码需要引入JQ 页面代码 <div class="print-Box" ><div id="test" ...
- electron 连接打印机打印pdf文件
electron 打印内容 区分系统 类似unix系统的使用 npm包:unix-print window系统使用: pdf-to-printer 运行线程 视图线程 函数参数 两个包都提供了prin ...
- android连接打印机打印
google有自己提供的api支持手机和打印机链接同一个局域网来打印东西,非常的方便 1.打印网页 PrintManager printManager = (PrintManager)mContext ...
- uniapp APP实现通过蓝牙连接打印机打印
蓝牙连接德佟打印机打印 1.导入插件: 在插件市场中搜索LPAPI,进入之后,点击右侧的"购买for云打包",选择目标项目,按照提示操作即可: 2. 配置插件: 用HBuilder ...
最新文章
- python求平方根的代码_Python求平方根（附带源码）
- linux服务器部署.net,Linux服务器部署.Net Core笔记：三、安装.NetCore运行环境
- network重启失败原因
- CKEditor5 基本使用
- redis过期策略和淘汰机制你知道多少？
- Spring Validation校验
- 20190313_C#反转绘制字符串
- html换浏览器div的位置固定不变,浏览器窗口更改时，HTML div不在适当的位置
- JavaScript词法作用域和动态作用域
- 【数学分析笔记01】平均值不等式证明
- vivado 开发教程(三) 在SDK中创建应用工程
- 微信jssdk 图片上传 JAVA_微信JSSDK上传图片
- 数据库-英语单词基础笔记-1
- html转word 自动分页,word怎样自动分页
- 边境的悍匪—机器学习实战：第九章 无监督学习任务
- 表格的下拉放大 ----------王朋
- 计算机 打印机型号编码不可用,win10系统查看打印机属性中描述不可用的解决方法...
- 塔防三国志服务器维护时间,塔防三国志中期玩家教程攻略详解
- 贝塞尔曲线想到的--真的很美，但是有时很丑
- linux计划定时自动删除目录下文件