我在我的应用程序中生成了barCode。打印barCode并导出pdf文件有一些问题。在这种情况下,barCode没有显示在print或pdf文件中。我使用angularjs js生成barCod by指令。
这是我的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>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.
Here is my 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
<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>最满意答案
您需要在新窗口中包含CSS,媒体类型为all,否则将在打印中忽略它。 此外,您将遇到浏览器无法打印条形码的问题,因为默认情况下它们会禁用打印背景图像。 您可以更改Chrome的CSS,以便覆盖此内容。 但是,在IE中,用户需要从工具 - >打印 - >页面设置更改其页面设置选项。
将$ 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>You need to include the CSS in the new window with a media type of all otherwise it will be ignored in the print. 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. However, in IE users need to change their page setup options from Tools->Print->Page setup.
Add the $timeout service to your controller and change the _printBarCode function as follows:
.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:
<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>更多推荐
发布评论