如何使用 javascript 打印 barCode 或以 pdf 格式导出 barCode答案

【问题标题】：How to print barCode using javascript or export barCode in pdf如何使用 javascript 打印 barCode 或以 pdf 格式导出 barCode
【发布时间】：2017-04-18 20:28:51
【问题描述】：

我在我的应用程序中生成了条码。打印条码和导出 pdf 文件时存在一些问题。在这种情况下，条码未显示在打印或 pdf 文件中。我使用 angularjs js 按指令生成条码。

这是我的 JavaScript

    $scope._printBarCode = function (printSectionId) {

    var innerContents = document.getElementById(printSectionId).innerHTML;
    var popupWinindow = window.open();//'', '_blank');
    popupWinindow.document.open();
    popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="Content/assets/css/barCode.css" /></head><body onload="window.print()">' + innerContents + '</html>');
    popupWinindow.document.close();

}

这是我的 html

                    <input type="button" value="Prnt" ng-click="_printBarCode('barCodeId')" class="btn btn-primary" />
                            <div class="barcodeplace">
                                <div class="col-sm-12">
                                    <div barcode-generator="{{_barCodeGeneraterId}}" style="height:20px;">
                                </div>
                            </div>
                            </div>

【问题讨论】：

标签： javascript angularjs pdf-generation

【解决方案1】：

您需要在新窗口中包含媒体类型为 all 的 CSS，否则它将在打印中被忽略。此外，您还会遇到浏览器不打印条形码的问题，因为默认情况下它们会禁用打印背景图像。您可以更改 Chrome 的 CSS 以便它覆盖它。但是，在 IE 中，用户需要从 Tools->Print->Page setup 更改他们的页面设置选项。

将 $timeout 服务添加到您的控制器并更改 _printBarCode 函数如下：

.controller('MyCtrl', function($scope,$timeout) {
$scope._printBarCode = function(printSectionId) {

    var innerContents = document.getElementById(printSectionId).innerHTML;
    var popupWindow = window.open('', 'Print');

    popupWindow.document.write('<!DOCTYPE html><html><head><style type="text/css">@media print { body { -webkit-print-color-adjust: exact; } }</style><link rel="stylesheet" type="text/css" href="barcode.css" media="all" /></head><body> ' + innerContents + '</body></html>');
    $timeout(function() {
        popupWindow.focus();
        popupWindow.print();
        popupWindow.close();
    });
};

然后在您的 HTML 中，您的 ng-click 需要引用页面上元素的 id：

<input type="button" value="Prnt" ng-click="_printBarCode('barCodeId')" class="btn btn-primary" />
<div id="barCodeId" class="barcodeplace">
    <div class="col-sm-12">
        <div barcode-generator="{{_barCodeGeneraterId}}" style="height:20px;">
        </div>
    </div>
</div>

【讨论】：

感谢您宝贵的时间。抱歉，jtnr 这段代码运行不正常，我也有同样的问题。barCode 不打印。我可以在 jsfiddle 示例中展示这个示例吗
非常感谢 jtsnr
@dear jtsnr 打印条码扫描仪无法捕获的条码时..所以请尽快给一些建议..