有没有从HTML页面打印一个div的角度的方式？ [英] Is there an Angular way of printing a div from a HTML page?
问题描述
我在使用AngularJS一个HTML页面，我想从它打印一个div。是否有这样做的角的方法吗？ ..或它`只是经典的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 ?
THX，
推荐答案
我创建了一个简单的指令打印使用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>
这就是它，它应该工作。
所述的hackish部分是因为没有跨浏览器的方法来检测所述打印执行结束时的iFrame是一定数量毫秒的后取出，所以你guestimate多少时间将需要为它运行
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的，它的工作，我不知道，因为我几乎从来没有它的工作。我加了一些行内注释，使事情更加清楚。我使用了一些code从这个答案使用弹出打印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的角度的方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
