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

2024-09-30 05:31:21

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实现页面打印功能

打印整个页面示例1. 可直接在按钮添加调用打印方法: <input type='button' value='打印整页' onclick='javascript:window.print();' /> 示例2. 也可调用JS方法 <html> <head> <script type="text/javascript"> function printpage() { window.print() } </script> <
js控制web打印(局部打印)方法整理

首先定义css样式: 复制代码代码如下: @media print { .noprint { display: none;color:green } } 对于不想打印的内容只用在标签中加上 class=noprint即可,打印的时候客户也不会看到页面任何变化. 打印时调用 window.print(); 另外几种js局部打印的方法: 移花接木: 打印的时候,把需要打印的内容替换成整个body内容(用户会在打印的时候看到变化,客户体验不太好) 复制代码代码如下: function previe
js如何打印object对象

js调试中经常会碰到输出的内容是对象而无法打印的时候,光靠alert只能打印出object标示,却不能打印出来里面的内容,甚是不方便,于是各方面整理总结了如下一个函数,能够将数组或者对象这类的结果一一打印出来,具体代码如下: function writeObj(obj){ var description = ""; for(var i in obj){ var property=obj[i]; description+=i+" = "+property+"
JavaScript实现点击按钮直接打印

很多网站都有此功能,当浏览到底部时都会有一个打印按钮,点击打印按钮就可以完成打印功能,功能非常不错,人性化,代码非常的简单. <a href="javascript:window.print()">我们</a> 也就是只要调用window.print()函数就可以实现打印当前页面. 但是上面的并不完美,因为有些网页上的很多内容都不需要打印,下面介绍一下如何打印页面中的指定内容. 代码如下: <!DOCTYPE html> <html> &
js实现页面打印功能实例代码(附去页眉页脚功能代码)

复制代码代码如下: <html> <head></head> <style type="text/css" media="screen"> @media print{ .print {display:block;} .notPrint {display:none;} } </style> <script language="javascript"> function pre
javascript 打印内容方法小结

一般打印就用window.print();就OK了但是一般都是选择性打印所以会调用方法: 复制代码代码如下: function preview() { bdhtml=window.document.body.innerHTML; sprnstr=""; eprnstr=""; prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
JS实现浏览器打印、打印预览示例

目前正在做浏览器端采用JS方式实现打印这么一个功能,JS打印实现的方法很多,但是兼容各个浏览器实现打印预览的功能有些棘手,现将实现的内容及遇到的问题记录下来,希望有大牛看到所提的问题后可以给予解答,在此感谢啦. 1.JS实现打印的方式方式一:window.print() window.print();会弹出打印对话框,打印的是window.document.body.innerHTML中的内容,下面是从网上摘到的一个局部打印的例子,该例子的不足是打印会修改页面的内容. <!DOCTYPE ht
js console.log打印对像与数组用法详解

本文实例讲述了js console.log打印对像与数组用法.分享给大家供大家参考,具体如下: console.log是什么东西,其实就是一个打印js数组和对像的函数而已,就像是php的print_r,var_dump.console.log这个函数本身没什么好说的,这篇博客告诉大家怎么去用这个函数.在说这个函数之前,我想大家用的最多查看js输出,是alert吧,但是alert,只能弹string或者是int的一.测试文件test.html <html xmlns="http://www
JS调用打印机功能简单示例

本文实例讲述了JS调用打印机功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g
js或jquery实现页面打印可局部打印

js或jquery实现页面打印(局部打印) 1.js实现(可实现局部打印) 复制代码代码如下: <html> <title>js打印</title> <head></head><body> <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();&quo

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

相关推荐

随机推荐