Angular JS打印div
Angular JS打印div
提问于 2014-08-09 00:22:47
我有一个专门为打印而格式化的指令。它在一个模式弹出窗口中打开，并准备好立即打印。
我使用的是一个可以打印div的jquery插件。
看起来应该是这么简单的
$($element).printArea();或$(element).printArea();，它的工作方式是...我用{{stuff}}得到了指令的未编译版本
我试着把$(element).printArea();放在指令和控制器中，结果是一样的…
任何帮助都将不胜感激。谢谢!
回答 1
Stack Overflow用户
发布于 2014-08-09 00:41:25
按照您描述它的方式，您应该将一个准备好的html字符串传递给print方法，创建一个iframe并打印它。
举个例子：
.controller('ModalCtrl', function ($scope, $modal, $log) {
$scope.open = function (yourdataobject) {
$scope.items = yourdataobject;
var modalInstance = $modal.open({
template: '<div id="printme"><div class="modal-header">' +
'<h3 class="modal-title">{{items.name + " " + items.surname }}</h3>' +
'</div>' +
'<div class="modal-body">' +
'<ul class="list-group">' +
'<li class="list-group-item">' +
{{ items.whatever }}' +
'</li>' +
'</ul>' +
'</div></div>' +
'<div class="modal-footer">' +
'<a class="btn btn-primary" href="#" print-div="#printme"><span class="glyphicon glyphicon-print"></span> Print</a>' +
'<button class="btn btn-primary" ng-click="ok()">Close</button>' +
'</div>',
controller: ModalInstanceCtrl,
size: '500',
resolve: {
items: function () {
return $scope.items;
}
}
});现在，这将使用任何数据呈现您的模式，并且您需要该指令来执行打印：
.directive('printDiv', function () {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function(evt){
evt.preventDefault();
PrintElem(attrs.printDiv);
});
function PrintElem(elem) {
PrintWithIframe($(elem).html());
}
function PrintWithIframe(data) {
if ($('iframe#printf').size() == 0) {
$('html').append('<iframe id="printf" name="printf"></iframe>');
var mywindow = window.frames["printf"];
mywindow.document.write('<html><head><title>Put a title if you want</title><style>@page {margin: 25mm 0mm 25mm 5mm;font-size:16pt;}</style>' +
'</head><body style="font-size:15pt !important;"><div>' +
data +
'</div></body></html>');
$(mywindow.document).ready(function(){
mywindow.print();
setTimeout(function(){
$('iframe#printf').remove();
},
2000);
});
}
return true;
}
}
};
});这是我正在使用的修改过的代码，我知道它可以工作，但我可能遗漏了一些东西，所以请让我知道。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25207919
复制相关文章
相似问题
腾讯云开发者
