admin管理员组文章数量:1530077
我们遇到很多的场景一般是自助设备或者电脑在链接USB、共享的打印机进行文件打印时，一般都是调用pdf.js或者js的print方法进行，但是用户体验比较差，看不到打印的过程进度，而且还会弹出一些系统的框，感觉很别扭，所以我封装了一套打印pdf、图片的工具插件，非常好用
操作步骤：
1.首先调用注册ocx控件
2.部署到apache或者nginx中，用ie浏览器打开，通过Printer Status Test Pagehttp://localhost:8085/Html/index.html
3.点击查询打印机，查询对应的打印机，选择左侧打印机列表中的打印机，填写pdf及图片的地址，可以选择本地文件以file://开头，点击打印按钮打印
4.查询mac地址，点击查询mac地址按钮，可查询所有的ip地址，便于系统使用中进行绑定辨别使用示例：
<HTML>
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1">
<TITLE>Printer Status Test Page</TITLE>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
function onPrintFinished() {
$('#loadingModal').modal('hide');
}
function onBeginDownload() {
$("#PrintState").text("正在下载文件...");
$("#progress").css("width", "0%");
}
function onFinishDownload() {
$("#PrintState").text("下载完成，正在打印...");
$("#progress").css("width", "100%");
}
function onDownloading(bytesRead, fileSize)
{
var percent = Math.floor( bytesRead / fileSize * 100);
$("#progress").css("width", percent + "%");
$("#PrintState").text("正在下载文件...(" + (bytesRead / 1024).toFixed(2) + "KB/" + (fileSize / 1024).toFixed(2) + "KB)");
}
$(document).ready(function () {
var activex = document.getElementById("PrnStatusCtrl");
$("#pdfURL").val(location.protocol + "//" + location.host + "/副本A4.pdf");
$("#imageURL").val(location.protocol + "//" + location.host + "/正本A3.png");
$("#btnTest").click(function () {
if (activex) {
var msg = activex.Hello();
alert("ActiveX called Result: " + msg);
} else {
alert("Object is not created!");
}
});
$("#btnQuery").click(function () {
if (activex) {
var printers_s = activex.GetPrinters()
var printers = eval('(' + printers_s + ')');
var list = $("#lstPrinters")
list.empty();
for (var j = 0; j <= printers.length - 1; j++) {
list.append('<li class="list-group-item">' + printers[j] + '</li>');
}
list.on('click', 'li', function () {
$("#lstPrinters li").removeClass("active");
$(this).addClass("active");
var printerName = $(this).text();
$("#selectedPrinter").text(printerName);
var info_s = activex.GetPrinterInfo(printerName);
var info = eval("(" + info_s + ")");
$("#PrinterName").text(info.device);
$("#PrinterDriver").text(info.driver);
$("#PrinterPort").text(info.port);
var lstBins = $("#lstBins");
lstBins.empty();
for (var k = 0; k < info.bins.length; k++) {
lstBins.append('<li class="list-group-item">' + info.bins[k].name + "," + info.bins[k].kind + '</li>')
}
$("#PrinterStatus").text(info.status);
$("#PrinterStatusMsg").text(info.msg);
lstBins.on('click', 'li', function () {
$("#lstBins li").removeClass("active");
$(this).addClass("active");
$("#selectedBin").text($(this).index());
});
})
} else {
alert("Object is not created!");
}
});
$("#btnPrintPDF").click(function () {
var selectedPrinter = $("#selectedPrinter").text();
var paper = $(':radio[name=paper]:checked').val();
var bin_s = $("#selectedBin").text();
var selectedBin;
var info_s = activex.GetPrinterInfo(selectedPrinter);
var info = eval("(" + info_s + ")");
var kind = 0;
if (bin_s != "") {
selectedBin = parseInt(bin_s);
kind = info.bins[selectedBin].kind;
}
else {
selectedBin = -1;
}
var url = $("#pdfURL").val();
var job = {
"printer": selectedPrinter,
"paper": paper,
"bin": kind,
"url": url
};
var job_s = JSON.stringify(job);
if (selectedPrinter != "") {
if (info.status == 0) {
$("#loadingModal").modal('show');
activex.PrintPDF(job_s);
$("#alert").text("OK");
}
else {
$("#alert").text("打印机状态异常");
}
}
});
$("#btnPrintImage").click(function () {
var selectedPrinter = $("#selectedPrinter").text();
var paper = $(':radio[name=paper]:checked').val();
var bin_s = $("#selectedBin").text();
var selectedBin;
var info_s = activex.GetPrinterInfo(selectedPrinter);
var info = eval("(" + info_s + ")");
var kind = 0;
if (bin_s != "") {
selectedBin = parseInt(bin_s);
kind = info.bins[selectedBin].kind;
}
else {
selectedBin = -1;
}
var url = $("#imageURL").val();
var job = {
"printer": selectedPrinter,
"paper": paper,
"bin": kind,
"url": url
};
var job_s = JSON.stringify(job);
if (selectedPrinter != "") {
if (info.status == 0) {
$("#loadingModal").modal('show');
activex.PrintImage(job_s);
$("#alert").text("OK");
}
else {
$("#alert").text("打印机状态异常");
}
}
});
$("#btnMacAddress").click(function () {
var mac_list_s = activex.GetMACAddress();
var mac_list = eval("(" + mac_list_s + ")");
var body = $("#MACList>tbody")
for (var i = 0; i < mac_list.length; i++) {
body.append('<tr> <td>' + mac_list[i].name + '</td> <td>' + mac_list[i].mac + '</td></tr>');
}
});
$(document).on('show.bs.modal', '.modal', function (e) {
var $this = $(this);
var $modal_dialog = $this.find('.modal-dialog');
$this.css('display', 'block');
$modal_dialog.css({ 'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
});
});
</script>
</HEAD>
<BODY>
<div class="modal" id="loadingModal" data-backdrop="static" data-keyboard="false"> vbvbb bm
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel"> 打印 </h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar" id="progress" style="width:40%;transition-duration:0ms;"></div>
</div>
<div id="activexStatus" class="alert alert-success" role="alert">
<h3 id="PrintState"> </h3>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
<div class="container theme-showcase" role="main">
<div class="page-header">
<h1>打印机测试</h1>
</div>
<button type="button" class="btn btn-lg btn-default" id="btnTest">测试</button>
<button type="button" class="btn btn-lg btn-default" id="btnQuery">查询打印机</button>
<div class="row">
<div class="col-xs-6 col-lg-4">
<div class="page-header">
<h2>打印机列表</h2>
</div>
<ul id="lstPrinters" class="list-group">
</ul>
</div>
<!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-8">
<div class="page-header">
<h2>打印机信息</h2>
</div>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<tbody>
<tr>
<th scope="row">打印机名</th>
<td id="PrinterName" class="text-success"> </td>
</tr>
<tr>
<th scope="row">驱动</th>
<td id="PrinterDriver" class="text-success"> </td>
</tr>
<tr>
<th scope="row">端口</th>
<td id="PrinterPort" class="text-success"> </td>
</tr>
<tr>
<th scope="row">纸盒</th>
<td class="text-success">
<ul id="lstBins" class="list-group">
</ul>
</td>
</tr>
<tr>
<th scope="row">状态码</th>
<td id="PrinterStatus" class="text-success"> </td>
</tr>
<tr>
<th scope="row">状态信息</th>
<td id="PrinterStatusMsg" class="text-success"> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<p><span>选中的打印机:</span><span id="selectedPrinter"></span></p>
<p><span>选中的纸盒:</span><span id="selectedBin"></span></p>
</div>
<div class="row">
<span>纸:</span>
<label>
<input type="radio" value="A4" name="paper" data-title="A4" checked="true" /> A4
</label>
<label>
<input type="radio" value="A3" name="paper" data-title="A3" /> A3
</label>
</div>
<div class="row">
<div class="input-group input-group-lg">
<span class="input-group-addon">PDF 网址:</span>
<input id="pdfURL" type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button id="btnPrintPDF" type="button" class="btn btn-default">打印PDF</button>
</div>
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon">Image 网址:</span>
<input id="imageURL" type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button id="btnPrintImage" type="button" class="btn btn-default">打印图片</button>
</div>
</div>
</div>
<div class="row">
<div id='alert' class="alert alert-danger" role="alert">
</div>
</div>
<button type="button" class="btn btn-lg btn-default" id="btnMacAddress">查询MAC地址</button>
<div class="row">
<div class="page-header">
<h2>MAC地址列表</h2>
</div>
<div class="table-responsive">
<table id="MACList" class="table table-bordered table-striped">
<thead>
<tr>
<th scope="row">网卡名称</th>
<th scope="row">MAC地址</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<OBJECT hidden ID="PrnStatusCtrl" CLASSID="CLSID:EA70B964-A1E8-418E-A942-B81EBF554817">
</OBJECT>
<script for="PrnStatusCtrl" event="OnBeginDownload">
onBeginDownload();
</script>
<script for="PrnStatusCtrl" event="OnFinishDownload">
onFinishDownload();
</script>
<script for="PrnStatusCtrl" event="OnPrintFinished">
onPrintFinished();
</script>
<script for="PrnStatusCtrl" event="OnDownloading(bytesRead, fileSize)">
onDownloading(bytesRead, fileSize);
</script>
</BODY>
</HTML>具有不同的版本， 详细参考：
IE控件调用本地、远程共享打印机打印pdf文件，pdf未光栅化-Javascript文档类资源-CSDN下载
同步ocx,javascript调用打印pdf，pdf光栅化，本地可以正常打印，远程共享打印机打印-Javascript文档类资源-CSDN下载
ieocx打印pdf文件，pdf光栅化，本地可以正常打印，远程能打印，可获取mac地址-Javascript文档类资源-CSDN下载
ie浏览器js调用ocx异步打印pdf、图片控件-Javascript文档类资源-CSDN下载
万能windows桌面框体-Javascript文档类资源-CSDN下载
版权声明：本文标题：IE浏览器调用ocx控件实现PDF、图片文件打印 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1726425204a1070296.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论