IE浏览器调用ocx控件实现PDF、图片文件打印

我是疯狂开发者

已于 2022-06-09 15:45:22 修改

阅读量2.7k

点赞数

分类专栏： js调用ocx打印文章标签： javascript

于 2022-06-09 15:41:03 首次发布

本文链接：https://blog.csdn.net/huzihuzihuzi12345/article/details/125204029

版权

js调用ocx打印专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们遇到很多的场景一般是自助设备或者电脑在链接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下载