Javascript 在Javascript中打印没有弹出窗口的div标签的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5089434/
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
Printing the contents of a div tag without a POP-Up window in Javascript
提问by Elitmiar
I'm struggling to print the contents of a div tag without a pop up window
我正在努力在没有弹出窗口的情况下打印 div 标签的内容
My code looks like this at the moment
我的代码目前看起来像这样
var DocumentContainer = document.getElementById('print');
var WindowObject = window.open('', 'Completed Registration Form', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
The below uses a popup window, is there a way to not do this using a popup window.
下面使用一个弹出窗口，有没有办法不使用弹出窗口来做到这一点。
回答by Stefan
There is a more efficient way - without jQuery or any other library
有一种更有效的方法 - 无需 jQuery 或任何其他库
The idea is to replace the window with a hidden iframe, and print the contents of the iframe.
这个想法是用隐藏的 iframe 替换窗口，并打印 iframe 的内容。
here is the code for that:
这是代码：
function ClickHereToPrint(){
try{
var oIframe = document.getElementById('ifrmPrint');
var oContent = document.getElementById('divToPrint').innerHTML;
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
if (oDoc.document) oDoc = oDoc.document;
oDoc.write('<head><title>title</title>');
oDoc.write('</head><body onload="this.focus(); this.print();">');
oDoc.write(oContent + '</body>');
oDoc.close();
} catch(e){
self.print();
}
}
This considers that you have an iframe in your page. if you don't, just create one using: document.createElement('iframe')
这认为您的页面中有一个 iframe。如果不这样做，只需使用以下方法创建一个：document.createElement('iframe')
回答by Ashok Kumawat
Try this function-
试试这个功能——
function PrintDiv(divid) {
var contents = document.getElementById(divid).innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
document.body.removeChild(frame1);
}, 500);
return false;
}
回答by benhowdle89
回答by Lightness Races in Orbit
What do you mean by "this"? What "this" is is code to open a window and write into it. If you want to do "this" by not using a popup window, then there's nothing left in the question.
你说的“这个”是什么意思？“这个”是打开一个窗口并写入其中的代码。如果你想通过不使用弹出窗口来做“这个”，那么问题就没有了。
Are you trying to write the contents of the <div>into the current document? Then simply do so!
您是否试图将 的内容写入<div>当前文档？那么就这样做吧！
var DocumentContainer = document.getElementById('print');
var WindowObject = window.open('', 'Completed Registration Form', <args>);
document.writeln(DocumentContainer.innerHTML);
Otherwise you need to be far more specific about what you wish to do.
否则，您需要更具体地说明您希望做什么。
EditOh, thatkind of printing! Wow, people still do that?
编辑哦，那类打印！哇，还有人这样做吗？
$('#print').print();
in jQuery, using the techniquethat behowdle89 linked to.
在 jQuery 中，使用behowdle89 链接到的技术。
Y'know, I imagine your users will wonder why they suddenly have a print dialog on their screen, and/or why their printer is suddenly whirring without notice. I suggest sending users to a PDF instead, which they can print on their own if they like, or save onto their hard disk if they have a bit more sense.
你知道，我想你的用户会想知道为什么他们的屏幕上突然出现打印对话框，和/或为什么他们的打印机突然在没有通知的情况下嗡嗡作响。我建议将用户发送到 PDF，如果他们喜欢，他们可以自己打印，或者如果他们有更多的感觉，可以保存到他们的硬盘上。
回答by Jason
all of the answers listed here use document.write which is bad practice, even to a temporary iframe.
此处列出的所有答案都使用 document.write，这是不好的做法，即使是临时 iframe。
try: https://github.com/jasonday/printThis
试试：https: //github.com/jasonday/printThis
It lets you pull in the page styles, as well as allowing for an additional stylesheet all without document.write.
它允许您引入页面样式，并允许在没有 document.write 的情况下添加额外的样式表。
回答by Amila kumara
this post has the answer
这篇文章有答案
print div content from user control without opening a new window
You might be able to generate a CSS file that excludes everything except the , something in the lines of:
您可能能够生成一个 CSS 文件，该文件排除除 之外的所有内容，以下行中的内容：
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
And the putting something like this in print.css:
在print.css中放置这样的东西：
* { display: none; }
#specialdiv { display: block; }
