我正在创建一个Chrome应用程序。我必须打印使用angular.js模式弹出的div内容。在HTML页面上,它工作正常,但在Chrome应用程序document.open()
和document.write()
不起作用。等待最佳结果?请找到下面的代码。AngularJs - 如何在Chrome应用程序中打印模式弹出div内容?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="https://cdn.healthscion.com/Zureka/compressfile/css/bootstrap.min.css.jgz" rel="stylesheet" type="text/css" />
<script src="https://cdn.healthscion.com/Zureka/compressfile/scripts/jquery-2.1.1.min.js.jgz" type="text/javascript"></script>
<script src="https://cdn.healthscion.com/Zureka/compressfile/scripts/bootstrap.min.js.jgz" type="text/javascript"></script>
<script src="https://cdn.healthscion.com/Scripts/angular1.2.25.min.js"></script>
</head>
<body>
<div data-ng-app="UnitApp" data-ng-controller="UnitController">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg onPrint" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div ng-repeat="model in friends track by model.id">
My Friends Name Is: {{model.name}}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-ng-click="onClear()">Close</button>
<button type="button" class="btn btn-primary onPrint" data-ng-click="onprint()">Print Code</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
var UnitApp = angular.module("UnitApp", []);
UnitApp.service("UnitAppservice", function ($http) {
});
UnitApp.controller("UnitController", function ($scope, $compile, UnitAppservice) {
var _ = $scope;
_.friends = [
{ name: 'John', id: 1 },
{ name: 'Jessie', id: 2 },
{ name: 'Johanna', id: 3 },
{ name: 'Joy', id: 4 }
];
_.onprint = function() {
debugger
$('.onPrint').css('display', 'none');
var contents = document.getElementById("myModal").innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
window.print();
}
_.onClear = function() {
$('#myModal').modal('hide');
$('.onPrint').css('display', 'inline-block');
}
});
</script>
这上面的回答是你的解决方案的更新,如果你不想使用的用户界面引导 –