我在我的应用程序中生成条码。打印条码和导出 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>
最佳答案
您需要在新窗口中包含媒体类型为 all 的 CSS，否则它会在打印中被忽略。此外，您还会遇到浏览器不打印条形码的问题，因为默认情况下它们禁用打印背景图像。您可以更改 Chrome 的 CSS，以便它覆盖它。但是，在 IE 中，用户需要从工具->打印->页面设置更改他们的页面设置选项。
将 $timeout 服务添加到您的 Controller 并更改 _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>
关于javascript - 如何使用 javascript 打印条码或以 pdf 格式导出条码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40957436/