是否有从 HTML 页面打印 div 的 Angular 方式? [英] Is there an Angular way of printing a div from a HTML page?
问题描述
我有一个使用 AngularJS 的 html 页面，我想从中打印一个 div.有 Angular 的方法吗?.. 或者它只是下面的经典 javascript 方式:
I have an html page using AngularJS, and I want to print a div from it. Is there an Angular way of doing it? .. or it`s just the classic javascript way below:
<script language="javascript" type="text/javascript">
function printDiv(divID) {
//Get the HTML of div
var divElements = document.getElementById(divID).innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
</script>
如果 AngularJS 对此没有任何帮助，您能否建议一种不使用 JavaScript 函数的方法(例如:doc.getElementById() ..一种接近 AngularJS 方法的方法?
If AngularJS doesn't have anything around this, can you suggest o way of doing it, without using JavaScript functions (ex: doc.getElementById() ).. an approach close to the AngularJS way ?
谢谢，
推荐答案
我已经创建了一个使用 iframe 技术打印 div 内容的简单指令.这有点hackish，但效果很好.在我看来，没有更好的方法可以做到这一点.指令脚本是:
I have created a simple directive for printing div contents using the iframe technique. It's a bit hackish, but works very well. there is no better way to do it in my opinion. The directive script is:
'use strict';
angular.module('yourAppNameHere').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>'); // an iFrame is added to the html content, then your div's contents are added to it and the iFrame's content is printed
var mywindow = window.frames["printf"];
mywindow.document.write('<html><head><title></title><style>@page {margin: 25mm 0mm 25mm 5mm}</style>' // Your styles here, I needed the margins set up like this
+ '</head><body><div>'
+ data
+ '</div></body></html>');
$(mywindow.document).ready(function(){
mywindow.print();
setTimeout(function(){
$('iframe#printf').remove();
},
2000); // The iFrame is removed 2 seconds after print() is executed, which is enough for me, but you can play around with the value
});
}
return true;
}
}
};
});
在您的模板中，您可以像这样标记打印按钮:
In your template you mark the print button like this:
<a href="#" print-div=".css-selector-of-the-div-you-want-to-print">Print!</a>
就是这样，它应该可以工作.骇人听闻的部分是 iFrame 在一定数量的毫秒后被删除，因为没有跨浏览器的方式来检测打印执行的结束，因此您可以估计它运行需要多长时间.
And that's it, it should work. The hackish part is that the iFrame is removed after a certain number of miliseconds as there is no cross-browser way to detect the end of the print execution, so you guestimate how much time would be needed for it to run.
您可能需要包含 jQuery 才能使其工作，我不确定，因为没有它我几乎从不工作.我添加了一些内联注释以使事情更清楚.我使用了 this answer 中的一些代码，它使用弹出窗口打印 div 内容(但在 Angular.js 之外).也许你会更喜欢这种方法.
You may need to include jQuery for it to work, I'm not sure as I almost never work without it. I added some inline comments to make things clearer. I used some code from this answer that uses a popup to print div content (but outside of Angular.js). Maybe you'll like that approach more.
这篇关于是否有从 HTML 页面打印 div 的 Angular 方式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
