一种基于浏览器的自动小票机打印实现方案(js版)


Posted in Javascript onJuly 26, 2016

1、使用场景

用户在浏览器做了某项操作后,自动打印小票。

2、测试方式

2.1 JavaScript实现

尝试了很多办法,最终都会出现一个弹出框,让用户选择打印机。不符合我们需求。

2.2 lodop

功能比较强大,但是收费的。暂不考虑。

2.3 PAZU

功能也很强大,免费许可。非常赞!

详情:http://www.4fang.net/article/tech/pazu_tprinter.html

实现过程:

2.3.1 打印详情页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小票</title>
<style>
body {
margin: 0px;
padding: 0px;
font-size: 11px;
}
hr{width: 100%; border: 1px dashed black;}
/*****************
小票
*****************/
.table .title{
font-size:14px;
}
.table{
width:100%;
}
.table .left{
text-align:right;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td align="center" class="title">ABC学校</td>
</tr>
<tr>
<td align="center">小票</td>
</tr>
<tr>
<td><hr size="1" /></td>
</tr>
</table>
<table class="table">
<caption>
<col style="width:40%">
<col style="width:60%">
</caption>
<tbody>
<tr>
<td class="left">签到时间:</td>
<td class="right">2015年10月19日 15:30</td>
</tr>
<tr>
<td class="left">学员姓名:</td>
<td class="right">周深</td>
</tr>
<tr>
<td class="left">班级:</td>
<td class="right">少儿班</td>
</tr>
<tr>
<td class="left">学校名称:</td>
<td class="right">ABC学院</td>
</tr>
<tr>
<td colspan="2"><hr size="1" /></td>
</tr>
</tbody>
</table>
<table class="table">
<caption>
<col style="width:40%">
<col style="width:60%">
</caption>
<tbody>
<tr>
<td class="left">卡信息:</td>
<td class="right">季卡/60次</td>
</tr>
<tr>
<td class="left">卡余额:</td>
<td class="right">32次</td>
</tr>
<tr>
<td class="left">到期日期:</td>
<td class="right">无限期</td>
</tr>
<tr>
<td class="left">激活日期:</td>
<td class="right">2015-09-08</td>
</tr>
<tr>
<td colspan="2"><hr size="1" /></td>
</tr>
</tbody>
</table>
<table class="table">
<tr>
<td align="center">感谢您的惠顾!<br/>请保管好小票,如有问题,请出示,谢谢!</td>
</tr>
<tr>
<td align="center"><img src="code.png" class="code"/><br/>扫码查详情</td>
</tr>
</table>
</body>
</html>

2.3.2 业务页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="printReceipt.js"></script>
</head>
<body>
<iframe frameborder="0" scrolling="scrolling" src="receipt.html" name="myifrm" id="myifrm" style="height: 0;width: 323px;">
</iframe>
<input class="p__" name="Button1" type="button" value="打印试试!" onclick="print(1);" style="width: 301px"/>
</body>
<script>
initPrintActiveX();
</script>
</html>

2.3.3 js引入

/**
* Created by hery on 2016/7/25.
*/
function initPrintActiveX(){
var div_ = document.createElement('div');
div_.style="display:none";
var object_=document.createElement('object');
object_.setAttribute("classid","clsid:AF33188F-6656-4549-99A6-E394F0CE4EA4");
object_.setAttribute("codebase","http://www.4Fang.net/4ff/sc_setup.exe");
object_.setAttribute("id","pazu");
object_.setAttribute("name","pazu");
var param_=document.createElement('param');
param_.setAttribute("name","License");
param_.setAttribute("value","2AE816BA3A24A9BA3F01162E7BF420F4");
object_.appendChild(param_);
div_.appendChild(object_);
document.getElementsByTagName("body")[0].appendChild(div_);
}
//预先选中的纸张
var strDefaultPaper = 'A4';
//1.载入打印机和纸张列表
function init() {
listPrinters();
//listPapers();
//2.页面载入立即打印
//demo();
}
//列出所有的打印机
function listPrinters() {
var ps = pazu.TPrinter.getPrinters();
//获得是一个以回车换行分隔的字符串
// alert(ps);
var pa = ps.split("\r\n");
for (var i = 0; i < pa.length; i++) {
//alert(pa[i]);
var Op = document.createElement("option");
Op.text = pa[i];
Op.value = pa[i];
try {
printers.add(Op);
} catch (ex) {
alert(ex.message)
}
}
}
function print(num) {
/*跳过IE打印选择提示*/
//默认打印机的名称设置为:GP-58120 Series
var isPromtUser = false;
/*页面设置*/
var sPaper = "A4";
// var sPrinter = printers.value;
var sPrinter = "GP-58120 Series";
pazu.TPrinter.marginTop = 1; //属性 上边距
pazu.TPrinter.marginBottom = 14; //属性 下边距
pazu.TPrinter.marginLeft = 7; //属性 左边距
pazu.TPrinter.marginRight = 8; //属性 右边距
pazu.TPrinter.footer = ""; //属性 页脚
pazu.TPrinter.header = ""; //属性 页眉
pazu.TPrinter.orientation = 1; //属性 整型:纸张方向 1=纵向 2=横向
pazu.TPrinter.paperName = sPaper; //属性 纸张大小名称
pazu.TPrinter.printerName = sPrinter; //属性 打印机名称
pazu.TPrinter.isPrintBackground = false; //属性 是否打印背景 true / false
pazu.TPrinter.isZoomOutToFit = true; //属性 是否缩放以适应大小打印 true / false
//pazu.TPrinter.printTemplate = sPT; //属性 打印模板的URL
pazu.TPrinter.copies = num; //属性 打印份数
//pazu.TPrinter.range = range.value; //属性 页面范围
pazu.TPrinter.isCopyByCopy = false; //属性 是否整份打印结束后再打印下一份 true / false
//pazu.TPrinter.getDefaultPrinter //方法 获得默认打印机的对象
//pazu.TPrinter.printToDefaultPrinter //方法 把要打印的字符串输送到默认打印机(配合getDefaultPrinter 使用)
//pazu.TPrinter.getPaperForms //方法 返回所有纸张格式的列表,以vbCrlf 分割
//pazu.TPrinter.getPrinters //方法 返回一个打印机列表,以vbCrlf 分割
//pazu.TPrinter.createPaper //方法 按指定的宽度和高度创建自定义纸张 请看示例
//pazu.TPrinter.doPrint //方法 执行打印
//pazu.TPrinter.doPrint_ //方法 执行打印但是不进行页面参数设置
//pazu.TPrinter.doPreview //方法 打印预览
//pazu.TPrinter.doPageSetup //方法 执行页面参数的设置
//pazu.TPrinter.showPageSetup //方法 弹出页面设置窗口
//pazu.TPrinter.writeHTMLtoOfficeFile 方法 把HTML导出为Office EXCEL或者 Word格式文件
//要指定打印那个Frame只要用javascript 让那个Frame获得焦点就可以了
//注意:这种方式下是不能预览的,只能立即打印。否则预览看到的是整个网页,而不是指定的frame
window.frames['myifrm'].focus();
//pazu.TPrinter.doPreview();//打印预览
pazu.TPrinter.doPrint(isPromtUser);
}
String.prototype.trim = function () {
return this.replace(/(^\s*)|(\s*$)/g, "");
}
function isNum(n) {
if (isNaN(n))return false;
return true;
}

以上所述是小编给大家介绍的一种基于浏览器的自动小票机打印实现方案(js版),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 #Javascript
JavaScript从0开始构思表情插件
Jul 26 #Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 #Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 #Javascript
js获取html的span标签的值方法(超简单)
Jul 26 #Javascript
js无法获取到html标签的属性的解决方法
Jul 26 #Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 #Javascript
You might like
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
租赁意向书范本
2014/04/01 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
爱国教育主题班会
2015/08/14 职场文书
初三化学教学反思
2016/02/22 职场文书
如何Tomcat中使用ipv6地址
2022/05/06 Servers