一种基于浏览器的自动小票机打印实现方案(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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
JS验证字符串功能
Feb 22 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
原生js 实现表单验证功能
Feb 08 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
php数据库备份还原类分享
2014/03/20 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
Django权限机制实现代码详解
2018/02/05 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
C语言笔试题
2014/09/04 面试题
医学生职业生涯规划书范文
2014/03/13 职场文书
初三学生个人自我评定
2014/04/06 职场文书
初中生评语大全
2014/04/24 职场文书
假面舞会策划方案
2014/05/29 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
python pygame入门教程
2021/06/01 Python