如何使用 JavaScript 在 div 上打印内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9724163/
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
How to use JavaScript to print the contents on a div?
提问by user1215071
I would like to use the print() function to print the contents of a <div class="pagecontent"></div>
我想使用 print() 函数打印一个 <div class="pagecontent"></div>
I know you can do something like onClick="window.print()"but this prints the entire window...I only want the contents of .pagecontentto be printed.
我知道你可以做类似的事情，onClick="window.print()"但这会打印整个窗口......我只想.pagecontent打印的内容。
What's the easiest way I can go about doing this using JavaScript or jQuery?
使用 JavaScript 或 jQuery 执行此操作的最简单方法是什么？
回答by Marc B
Easiest way is to define a stylesheet that applies for @media=print. It would basically have something like:
最简单的方法是定义一个适用于@media=print. 它基本上有类似的东西：
* {
display: none; /* hide all elements when printing */
}
.pageContent {
display: block; /* make any class="pageContent" elements visible while printing */
}
Of course, this would make the pageContent elements visible, but anything inside them would still be invisible from the *rule. You'll have to play with this and list only the top-level elements that should be hidden.
当然，这将使 pageContent 元素可见，但其中的任何内容在*规则中仍然不可见。您必须使用它并仅列出应该隐藏的顶级元素。
回答by Jasper
You can add the contents of an element to an iframe and then print the iframe.
您可以将元素的内容添加到 iframe，然后打印 iframe。
HTML --
HTML --
<span>Print Just Me.</span> I'll be omitted.<br />
<iframe id="iframe"></iframe>?
JS --
JS——
$('span').on('click', function () {
$('#iframe').contents().find('body').html($(this).html());
window.frames['iframe'].print();
});?
Here is a demo: http://jsfiddle.net/zaF3K/
这是一个演示：http: //jsfiddle.net/zaF3K/
You can also hide the iframe so this happens behind the scenes:
您还可以隐藏 iframe，以便在幕后执行此操作：
#iframe {
display : none;
}?
Here is a demo: http://jsfiddle.net/zaF3K/1/
这是一个演示：http: //jsfiddle.net/zaF3K/1/
回答by Jignesh Rajput
if you want to using javascript than try this
如果你想使用javascript而不是试试这个
window.printItn = function() {
var printContent = document.getElementById('pagecontent');
var windowUrl = 'about:blank';
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();
// you should add all css refrence for your html. something like.
var WinPrint= window.open(windowUrl,windowName,'left=300,top=300,right=500,bottom=500,width=1000,height=500');
WinPrint.document.write('<'+'html'+'><head><link href="cssreference" rel="stylesheet" type="text/css" /></head><'+'body style="background:none !important"'+'>');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.write('<'+'/body'+'><'+'/html'+'>');
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
See Demo: http://jsfiddle.net/mu8BG/1/
回答by kappa
There is the jqprint jquery plugin, take a look
有jqprint jquery插件，看看
回答by angelfilm entertainment
You can get the contents of the div by using innerHTML and storing that as a string, then just print or log that piece by itself.
您可以通过使用 innerHTML 并将其存储为字符串来获取 div 的内容，然后仅打印或记录该部分本身。
var string_to_print = $('#pagecontent').html();
