ActiveX控件的使用-js实现打印超市小票功能代码详解


Posted in Javascript onNovember 22, 2017

·应客户的需求= = ,要在网页端实现打印小票的功能

·先来一张打印出的小票效果图(合计明显不对,因为有修改订单功能,请各位忽略)

ActiveX控件的使用-js实现打印超市小票功能代码详解

用什么方法实现呢:

我想应该是有三种吧

1.用第三方的浏览器控件(这个好似比较方便,我的老师也是这样建议我)向大家推荐一个 Lodop打印控件

2.用CSS写好模板,然后直接用页面打印的方法(应该是这样吧)

以上两种还没有尝试,这两天陆续尝试)

3.用微软自己的ActiveX控件(ActiveX控件可以实现调用本地的文件等操作(之前试过调用cmd,实现shutdown -s -t,在网页控制电脑的定时关机))

当然这种方法的缺点也很明显:限操作系统-因为是微软的东西只能Windows下,限浏览器-因为ActiveX也只能在IE浏览器下。所以局限性比较大

实现过程:

1.编辑『word小票模板』,要用到word中『书签』这个工具(通过『书签』的定位,js就可以操作word在『书签』指定的位置进行 修改、写入内容)

2.在js对word模板进行 打开、赋值、打印操作

一、编辑『word小票模板』

1.以word2007为例,首先排好大致的样式

ActiveX控件的使用-js实现打印超市小票功能代码详解

二、js

直接上源代码吧:

<input type="button" value="toPrinter " onclick="viewToWord();" />
- Hide code
function viewToWord() {
    //当前时间
    var Time;
    var today = new Date();
    Time = today.toLocaleString();
    
    try { 
      // 创建ActiveXObject对象 
      wdapp = new ActiveXObject("Word.Application"); 
    } 
    catch (e) { 
      console.log("无法调用Office对象,!", e) 
      wdapp = null; 
      return; 
    }
    wdapp.Documents.Open("f:\\PrinterTemplate1.doc"); //打开本地(客户端)word模板
    wddoc = wdapp.ActiveDocument; 
    wddoc.Bookmarks("OrderNum").Range.Text = "201509080959" + "\n";
    wddoc.Bookmarks("OrderName").Range.Text = "郑斌" + "\n"; 
    wddoc.Bookmarks("OrderAddress").Range.Text = "www.cnblogs.com/zhengbin" + "\n";
    wddoc.Bookmarks("OrderPhoneNum").Range.Text = "QQ:1746788394" + "\n";
    wddoc.Bookmarks("OrderDaocanTime").Range.Text = "10:00-11:00" + "\n";
    wddoc.Bookmarks("OrderTime").Range.Text = "09-08 10:15";
    //添加表格
    var myTable = wddoc.Tables.Add (wddoc.Bookmarks("OrderCart").Range,3,3);//(赋值区域,行数,列数)
    //隐藏边框
    var table=wdapp.ActiveDocument.Tables(1);
    table.Borders(-1).LineStyle=0;
    table.Borders(-2).LineStyle=0;
    table.Borders(-3).LineStyle=0;
    table.Borders(-4).LineStyle=0;
    table.Borders(-5).LineStyle=0;
    table.Borders(-6).LineStyle=0;
    for(i=1;i<=3;i++){//行
      //第一列
      with (myTable.Cell(i,1).Range){
        font.Size = 8;//调整字体大小
        InsertAfter("博客园"+i);//插入的内容
      }
      //第二列
      with(myTable.Cell(i,2).Range){
        font.Size = 8;
        InsertAfter(i);
        ParagraphFormat.Alignment=1;//表格内容对齐:0-左对齐 1-居中 2-右对齐
      }
      //第三列
      with(myTable.Cell(i,3).Range){
        font.Size = 8;
        InsertAfter("无价");
        ParagraphFormat.Alignment=2;
      }
    }
    wddoc.saveAs("f:\\PrinterTemp_cnblogs.doc"); //保存临时文件word
    wddoc.Bookmarks("TotalPrice").Range.Text = "无价" + "\n";
    wddoc.Bookmarks("Time").Range.Text = Time; 
    //wdapp.ActiveDocument.ActiveWindow.View.Type = 1;
    wdapp.visible = false; //word模板是否可见 
    wdapp.Application.Printout(); //调用自动打印功能 
    wdapp.quit();
    wdapp = null; 
  }

最后:

ActiveX控件的使用-js实现打印超市小票功能代码详解

注意:

首先要调整好IE浏览器的 Internet选项-自定义级别(右边『ActiveX控件和插件』下,能启用的都启用)

ActiveX控件的使用-js实现打印超市小票功能代码详解

『打印机脱机工作』一般是usb没有插好,换插口,重启打印机即可

有关ActiveX控件,简单介绍下:ActiveX是Microsoft对于一系列策略性面向对象程序技术和工具的称呼,其中主要的技术是组件对象模型(COM)。在有目录和其它支持的网络中,COM变成了分布式COM(DCOM)。ActiveX 控件是用于互联网的很小的程序,有时称为插件程序。它们会允许播放动画,或帮助执行任务,如在 Microsoft Update 安装安全更新,因此可以增强您的浏览体验。下面附本站免费下载地址:

总结

以上就是本文关于ActiveX控件的使用-js实现打印超市小票功能代码详解的全部内容,希望对大家有所帮助。如有问题可以随时留言指出,感谢朋友们对本站的支持!

Javascript 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 #Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 #Javascript
浅谈Angular 中何时取消订阅
Nov 22 #Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 #Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 #Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 #Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 #Javascript
You might like
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP数组实例详解
2016/06/26 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
python实现淘宝秒杀脚本
2020/06/23 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
Python绘制数码晶体管日期
2021/02/19 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
温泉秘密:Onsen Secret
2020/07/06 全球购物
为什么要有struct关键字
2012/05/08 面试题
物业管理专业自荐信
2014/07/01 职场文书
2014年度个人工作总结
2014/11/07 职场文书
2015年计划生育责任书
2015/05/08 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS