如何使用javascript打印barCode或以pdf格式导出barCode(How to print barCode using javascript or export barCode in p

如何使用javascript打印barCode或以pdf格式导出barCode(How to print barCode using javascript or export barCode in pdf)

我在我的应用程序中生成了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

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

最满意答案

您需要在新窗口中包含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：

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:

更多推荐