jQuery 是否有从 HTML 页面打印 div 的 Angular 方式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19637312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there an Angular way of printing a div from a HTML page?
提问by Ionut Ursan
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:
我有一个使用 AngularJS 的 html 页面，我想从中打印一个 div。有 Angular 的方法吗？.. 或者它只是下面的经典 javascript 方式：
<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>
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 ?
如果 AngularJS 对此没有任何帮助，您能否建议一种不使用 JavaScript 函数的方法（例如：doc.getElementById()）...一种接近 AngularJS 方法的方法？
Thx,
谢谢，
回答by Mladen Danic
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:
我创建了一个使用 iframe 技术打印 div 内容的简单指令。这有点hackish，但效果很好。在我看来，没有更好的方法可以做到这一点。指令脚本是：
'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>
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.
就是这样，它应该可以工作。骇人听闻的部分是 iFrame 在一定的毫秒数后被删除，因为没有跨浏览器的方式来检测打印执行的结束，因此您可以估计它运行需要多长时间。
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 answerthat uses a popup to print div content (but outside of Angular.js). Maybe you'll like that approach more.
您可能需要包含 jQuery 才能使其工作，我不确定，因为没有它我几乎从不工作。我添加了一些内联注释以使事情更清楚。我使用了这个答案中的一些代码，它使用弹出窗口来打印 div 内容（但在 Angular.js 之外）。也许你会更喜欢这种方法。
回答by Travis
I needed this to work in IE8+
我需要它在 IE8+ 中工作
'use strict';
angular
.module('print-div', [])
.directive('printDiv', function () {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var iframe;
var elementToPrint = document.querySelector(attrs.printDiv);
if (!window.frames["print-frame"]) {
var elm = document.createElement('iframe');
elm.setAttribute('id', 'print-frame');
elm.setAttribute('name', 'print-frame');
elm.setAttribute('style', 'display: none;');
document.body.appendChild(elm);
}
function write(value) {
var doc;
if (iframe.contentDocument) { // DOM
doc = iframe.contentDocument;
} else if (iframe.contentWindow) { // IE win
doc = iframe.contentWindow.document;
} else {
alert('Wonder what browser this is... ' + navigator.userAgent);
}
doc.write(value);
doc.close();
}
element.bind('click', function(event) {
iframe = document.getElementById('print-frame');
write(elementToPrint.innerHTML);
if (window.navigator.userAgent.indexOf ("MSIE") > 0) {
iframe.contentWindow.document.execCommand('print', false, null);
} else {
iframe.contentWindow.focus();
iframe.contentWindow.print();
}
});
}
};
});
回答by Bill Yang
angularPrint is an angular directive that's super easy to use. https://github.com/samwiseduzer/angularPrint
angularPrint 是一个非常容易使用的角度指令。 https://github.com/samwiseduzer/angularPrint
you simply decorate your html with its custom attributes:
您只需使用其自定义属性装饰您的 html：
<div>
<div print-section>
I'll print
<p>Me, too!</p>
</div>
<div>I won't</div>
</div>
