我正在使用的angularjs指令
function printDiv() {
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><link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"><link href="css/style.css" rel="stylesheet" type="text/css"></head><body>'
+ data +
'</body></html>');
$(mywindow.document).ready(function() {
mywindow.print();
// $('iframe#printf').remove();
});
} else {
window.frames["printf"].print();
}
return true;
}
}
};
}
如果删除外部css样式链接,mywindow.print()
可以正常工作。使用这些css样式链接,我第一次调用printDiv
时,它总是显示一个空的预览,如果我打印出它也是空的,但我可以在底部看到创建的iframe
页面,它不是空的。如果我第二次调用该函数,它将打印正确的预览。我用Google搜索并发现someone建议:
setTimeout(function() {
mywindow.print();
}, 1000);
但我发现print()
里面的setTimeout
从未被调用过。
知道如何在第一时间进行打印工作吗?感谢。
更新:用document.write
替换document.body.innerHTML
后,预览不再为空,但外部css样式从未应用于预览,但我可以看到iframe
中的样式是正确的。我在Firefox和Chrome上试过这个。
$('html').append('<iframe id="printf" name="printf"></iframe>');
window.frames["printf"].document.body.innerHTML='<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"><link href="css/style.css" rel="stylesheet" type="text/css">' + $(attrs.printDiv).html();
$(window.frames["printf"].document).ready(function() {
window.frames["printf"].window.focus();
window.frames["printf"].window.print();
// $('iframe#printf').remove();
});