Javascript 如何仅打印选定的 HTML 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6500962/
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 print only a selected HTML element?
提问by t0mcat
I am trying to implement a print feature in HTML. I know I can print the whole page with window.print(), but how do I print only a specific page element? For example a particular <DIV>Some text to print</DIV>.
我正在尝试在 HTML 中实现打印功能。我知道我可以用 打印整个页面window.print()，但是如何只打印特定的页面元素？例如一个特定的<DIV>Some text to print</DIV>.
回答by ashurexm
You could use a print specific CSS stylesheet and hide everything but what you want printed.
您可以使用打印特定的 CSS 样式表并隐藏除您要打印的内容之外的所有内容。
<div class="no-print">I won't print</div><div class="something-else">I will!</div>
<div class="no-print">I won't print</div><div class="something-else">I will!</div>
Just the no-printclass will be hidden, but anything with a print class will show.
就在no-print班级会被隐藏，但打印类东西会展现出来。
<style type="text/css" media="print">
.no-print { display: none; }
</style>
回答by Ravan Scafi
If you are familiar to jQuery, you can use jQuery Print Elementplugin like this:
如果你熟悉 jQuery，你可以像这样使用jQuery Print Element插件：
$('SelectorToPrint').printElement();
回答by Gaurav
Created something generic to use on any HTML element
创建了可用于任何 HTML 元素的通用内容
HTMLElement.prototype.printMe = printMe;
function printMe(query){
var myframe = document.createElement('IFRAME');
myframe.domain = document.domain;
myframe.style.position = "absolute";
myframe.style.top = "-10000px";
document.body.appendChild(myframe);
myframe.contentDocument.write(this.innerHTML) ;
setTimeout(function(){
myframe.focus();
myframe.contentWindow.print();
myframe.parentNode.removeChild(myframe) ;// remove frame
},3000); // wait for images to load inside iframe
window.focus();
}
Usage:
用法：
document.getElementById('xyz').printMe();
document.getElementsByClassName('xyz')[0].printMe();
Hope this help
Regards
Gaurav Khurana
希望这有助于
问候
拉夫•库拉纳
回答by mwag
If you are using JQuery, you can use cloneto do the following:
如果您使用的是 JQuery，则可以使用clone来执行以下操作：
function printElement(e) {
var ifr = document.createElement('iframe');
ifr.style='height: 0px; width: 0px; position: absolute'
document.body.appendChild(ifr);
$(e).clone().appendTo(ifr.contentDocument.body);
ifr.contentWindow.print();
ifr.parentElement.removeChild(ifr);
}
and use like so:
printElement(document.getElementById('myElementToPrint'))
并像这样使用：
printElement(document.getElementById('myElementToPrint'))
回答by gengns
If I understood you well you can use CSS3 to print your selected HTML element.
如果我理解你，你可以使用 CSS3 来打印你选择的 HTML 元素。
@media print {
body.print-element *:not(.print) {
display: none;
}
}
Notice, that you just need a selector. This allows you to easily print an element or the entire page using CSS classes.
请注意，您只需要一个选择器。这允许您使用 CSS 类轻松打印元素或整个页面。
Here you can check a working example: https://jsfiddle.net/gengns/d50m8ztu/
在这里您可以查看一个工作示例：https: //jsfiddle.net/gengns/d50m8ztu/
回答by Parshuram Kalvikatte
Printing an Html or a Selected Html is easy using Print.Js Add Print.Js Library
使用 Print.Js 添加 Print.Js 库可以轻松打印 Html 或选定的 Html
http://printjs.crabbly.com/
<form method="post" action="#" id="printJS-form">
...
</form>
<button type="button" onclick="printJS('printJS-form', 'html')">
Print Form
</button>
回答by Parshuram Kalvikatte
Here is another (perhaps a more modern?) solution:
这是另一个（也许是更现代的？）解决方案：
<link rel="stylesheet" media="print" href="print.css">
