脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 浏览器自动小票机打印

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

 更新时间：2016年07月26日 14:17:07   作者：53545436  
这篇文章主要介绍了一种基于浏览器的自动小票机打印实现方案(js版)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

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版)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • firefox插件Firebug的使用教程

    firefox插件Firebug的使用教程

    Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。
    2010-01-01
  • iframe实现与父页面跨域隔离的JavaScript 代码沙箱

    iframe实现与父页面跨域隔离的JavaScript 代码沙箱

    这篇文章主要介绍了使用iframe实现与父页面跨域隔离的JavaScript代码沙箱，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • js+css实现三级导航菜单

    js+css实现三级导航菜单

    这篇文章主要为大家详细介绍了js+css实现三级导航菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Javascript File和Blob详解

    Javascript File和Blob详解

    这篇文章主要为大家介绍了Javascript File和Blob，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • 原生JS实现图片轮播效果

    原生JS实现图片轮播效果

    这篇文章主要为大家详细介绍了原生JS实现图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • javascript中eval和with用法实例总结

    javascript中eval和with用法实例总结

    这篇文章主要介绍了javascript中eval和with用法,结合实例形式总结分析了JavaScript中eval和with的功能、用法与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 利用JS轻松实现获取表单数据

    利用JS轻松实现获取表单数据

    本文主要介绍了利用JS轻松实现获取表单数据。方法有别于原始的做法，大家可以试着找原始做法与本文所说方法之间的区别。有兴趣的朋友可以看下，希望对大家有所帮助
    2016-12-12
  • Knockout结合Bootstrap创建动态UI实现产品列表管理

    Knockout结合Bootstrap创建动态UI实现产品列表管理

    这篇文章主要为大家详细介绍了Knockout结合Bootstrap创建动态UI实现产品列表管理,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 详解webpack 打包文件体积过大解决方案（code splitting）

    详解webpack 打包文件体积过大解决方案（code splitting）

    这篇文章主要介绍了webpack 打包文件体积过大解决方案（code splitting）,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 小程序自定义轮播图圆点组件

    小程序自定义轮播图圆点组件

    这篇文章主要为大家详细介绍了小程序自定义轮播图圆点组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论