如何使用javascript打印条形码或在pdf中导出条形码

Question

I have Generate barCode in my application.There are some problems to print barCode and also export pdf file.In this case barCode is not showing in print or pdf file.I have Generate barCod by directive using angularjs js. 我的应用程序中有生成条形码。打印条形码和导出pdf文件时遇到一些问题。在这种情况下，条形码未显示在打印或pdf文件中。我已经使用angularjs js通过指令生成了条形码。

Here is my JavaScript 这是我的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();

}

and here is my html 这是我的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>

Answer 1

You need to include the CSS in the new window with a media type of all otherwise it will be ignored in the print. 您需要在新窗口中包含所有媒体类型的CSS，否则它将在打印中被忽略。 Also you will have problems with browsers not printing the barcode as by default they disable printing background images. 同样，您会遇到浏览器不打印条形码的问题，因为默认情况下，它们将禁用打印背景图像。 You can change the CSS for Chrome so it overrides this. 您可以更改Chrome的CSS，以便覆盖它。 However, in IE users need to change their page setup options from Tools->Print->Page setup. 但是，在IE中，用户需要从“工具”->“打印”->“页面设置”更改其页面设置选项。

Add the $timeout service to your controller and change the _printBarCode function as follows: 将$ 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();
    });
};

Then in your HTML your ng-click needs to reference the id of an element on the page: 然后在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>

如何使用javascript打印条形码或在pdf中导出条形码

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-12-04 15:42:49

如何使用javascript打印条形码或在pdf中导出条形码

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-12-04 15:42:49

解决方案1
2 已采纳 2016-12-04 15:42:49