首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

一种基于浏览器的自动小票机打印实现方案(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版)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

53545436

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 走马灯简单实例
Nov 21 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
js获取本日、本周、本月的时间代码
Feb 01 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
name_scope (1) turtle(1) 信号库(1) variable_scope(1) Keras(3) 定时任务(2) 三子棋(2) 绘图(1) 计时器(1) blinker(1)
You might like
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
Python实现简单多线程任务队列
2016/02/27 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
opencv 形态学变换(开运算，闭运算，梯度运算)
2020/07/07 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
数控技术应届生求职信
2013/11/13 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
争先创优演讲稿
2014/09/15 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
大国崛起英国观后感
2015/06/02 职场文书
工作时间证明
2015/06/15 职场文书
欠条范文
2015/07/03 职场文书
社会实践心得体会范文
2016/01/14 职场文书
python - timeit 时间模块
2021/04/06 Python
QT与javascript交互数据的实现
2021/05/26 Javascript
Redis 常见使用场景
2021/08/30 Redis
react 路由Link配置详解
2021/11/11 Javascript