打印 DIV 的内容
[英]Print the contents of a DIV
问题描述
Whats the best way to print the contents of a DIV?
打印 DIV 内容的最佳方法是什么？
31 个解决方案
解决方案1
599 已采纳 2010-02-12 22:06:18
Slight changes over earlier version - tested on CHROME与早期版本相比略有变化 - 在 CHROME 上测试
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
解决方案2
201 2011-08-23 20:54:07
I think there is a better solution.我认为有更好的解决方案。 Make your div to print cover the entire document, but only when it's printed:让您的 div 打印覆盖整个文档，但仅在打印时：
@media print {
.myDivToPrint {
background-color: white;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
}
}
解决方案3
46 2010-09-26 14:57:54
Although this has been said by @gabe , If you are using jQuery, you can use my printElement plugin.尽管@gabe已经说过，但如果您使用的是 jQuery，则可以使用我的printElement插件。
There's a sample here , and more information about the plugin here . 这里有一个示例， 这里有关于插件的更多信息。
The usage is rather straight forward, just grab an element with a jQuery selector and print it:用法相当简单，只需使用 jQuery 选择器抓取一个元素并打印它：
$("#myDiv").printElement();
I hope it helps!我希望它有帮助！
解决方案4
32 2015-02-11 06:18:32
Using Jquery, simply use this function:使用 Jquery，只需使用此功能：
<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>
Your print button will look like this:您的打印按钮将如下所示：
<button id="print" onclick="printContent('id name of your div');" >Print</button>
Edit: If you DO have form data that you need to keep, clone won't copy that, so you'll just need to grab all the form data and replace it after restore as so:编辑：如果您确实有需要保留的表单数据，则克隆不会复制它，因此您只需要获取所有表单数据并在还原后将其替换为：
<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
$('#text').html(enteredtext);
}
</script>
<textarea id="text"></textarea>
解决方案5
21 2012-07-19 08:09:06
From here https://forums.asp.net/t/1261525.aspx从这里https://forums.asp.net/t/1261525.aspx
<html>
<head>
<script language="javascript">
function printdiv(printpage) {
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + newstr + footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
<title>div print</title>
</head>
<body>
//HTML Page //Other content you wouldn't like to print
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">
<div id="div_print">
<h1 style="Color:Red">The Div content which you want to print</h1>
</div>
//Other content you wouldn't like to print //Other content you wouldn't like to print
</body>
</html>
解决方案6
19 2015-12-05 11:41:50
i used Bill Paetzke answer to print a div contain images but it didn't work with google chrome我使用Bill Paetzke答案打印包含图像的 div，但它不适用于 google chrome
i just needed to add this line myWindow.onload=function(){ to make it work and here is the full code我只需要添加这一行myWindow.onload=function(){使其工作，这是完整的代码
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
<script type="text/javascript">
function PrintElem(elem) {
Popup($(elem).html());
}
function Popup(data) {
var myWindow = window.open('', 'my div', 'height=400,width=600');
myWindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
myWindow.document.write('</head><body >');
myWindow.document.write(data);
myWindow.document.write('</body></html>');
myWindow.document.close(); // necessary for IE >= 10
myWindow.onload=function(){ // necessary if the div contain images
myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
</script>
</head>
<body>
<div id="myDiv">
This will be printed.
<img src="image.jpg"/>
</div>
<div>
This will not be printed.
</div>
<div id="anotherDiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintElem('#myDiv')" />
</body>
</html>
also if someone just need to print a div with id he doesn't need to load jquery另外，如果有人只需要打印一个带有 id 的 div，他就不需要加载 jquery
here is pure javascript code to do this这是执行此操作的纯 JavaScript 代码
<html>
<head>
<script type="text/javascript">
function PrintDiv(id) {
var data=document.getElementById(id).innerHTML;
var myWindow = window.open('', 'my div', 'height=400,width=600');
myWindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
myWindow.document.write('</head><body >');
myWindow.document.write(data);
myWindow.document.write('</body></html>');
myWindow.document.close(); // necessary for IE >= 10
myWindow.onload=function(){ // necessary if the div contain images
myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
</script>
</head>
<body>
<div id="myDiv">
This will be printed.
<img src="image.jpg"/>
</div>
<div>
This will not be printed.
</div>
<div id="anotherDiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintDiv('myDiv')" />
</body>
</html>
i hope this can help someone我希望这可以帮助某人
解决方案7
18 2012-12-04 06:23:00
function printdiv(printdivname) {
var headstr = "<html><head><title>Booking Details</title></head><body>";
var footstr = "</body>";
var newstr = document.getElementById(printdivname).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
This will print the div area you want and set the content back to as it was.这将打印您想要的div区域并将内容设置回原样。 printdivname is the div to be printed. printdivname是要打印的div 。
解决方案8
13 2010-02-12 21:51:46
Create a separate print stylesheet that hides all other elements except the content you want to print.创建一个单独的打印样式表，隐藏除您要打印的内容之外的所有其他元素。 Flag it using 'media="print" when you load it:加载时使用'media="print"对其进行标记：
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
This allows you to have a completely different stylesheet loaded for printouts.这允许您为打印输出加载完全不同的样式表。
If you want to force the browser's print dialog to appear for the page, you can do it like this on load using JQuery:如果你想强制浏览器的打印对话框出现在页面上，你可以使用 JQuery 在加载时这样做：
$(function() { window.print(); });
or triggered off of any other event you want such as a user clicking a button.或触发您想要的任何其他事件，例如用户单击按钮。
解决方案9
12 2013-03-10 23:39:57
I authored a plugin to address this scenario.我编写了一个插件来解决这种情况。 I was unhappy with the plugins out there, and set out to make something more extensive/configurable.我对那里的插件不满意，并着手制作更广泛/可配置的东西。
https://github.com/jasonday/printThis https://github.com/jasonday/printThis
解决方案10
12 2015-10-20 15:57:18
I think the solutions proposed so far have the following drawbacks:我认为目前提出的解决方案有以下缺点：
- The CSS media query solutions assume there is only one div to print. CSS 媒体查询解决方案假设只有一个 div 可以打印。
- The javascript solutions work only on certain browsers. javascript 解决方案仅适用于某些浏览器。
- Destroying the parent window content and recreating that creates a mess.销毁父窗口内容并重新创建会造成混乱。
I have improved on the solutions above.我对上述解决方案进行了改进。 Here is something that I have tested that works really well with the following benefits.这是我已经测试过的东西，它具有以下好处。
- Works on all the browsers including IE, Chrome, Safari and firefox.适用于所有浏览器，包括 IE、Chrome、Safari 和 firefox。
- Doesn't destroy and reload the parent window.不破坏和重新加载父窗口。
- Can print any number of DIV's on a page.可以在一页上打印任意数量的 DIV。
- Uses HTML templates to avoid error prone string concatenation.使用 HTML 模板来避免容易出错的字符串连接。
Key Points to note :需要注意的要点：
- Have to have a onload="window.print()" on the newly created window.必须在新创建的窗口上有一个 onload="window.print()" 。
- Don't call targetwindow.close() or targetwindow.print() from the parent.不要从父级调用 targetwindow.close() 或 targetwindow.print()。
- Make sure you do targetwindow.document.close() and target.focus()确保您执行 targetwindow.document.close() 和 target.focus()
- I'm using jquery but you can do the same technique using plain javascript as well.我正在使用 jquery，但您也可以使用纯 javascript 执行相同的技术。
- You can see this in action here https://math.tools/table/multiplication .您可以在此处查看此操作https://math.tools/table/multiplication 。 You can print each table separately, by clicking on the print button on the box header.您可以通过单击框标题上的打印按钮单独打印每个表格。
<script id="print-header" type="text/x-jquery-tmpl"> <html> <header> <title>Printing Para {num}</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style> body { max-width: 300px; } </style> </header> <body onload="window.print()"> <h2>Printing Para {num} </h2> <h4>https://math.tools</h4> </script> <script id="print-footer" type="text/x-jquery-tmpl"> </body> </html> </script> <script> $('.printthis').click(function() { num = $(this).attr("data-id"); w = window.open(); w.document.write( $("#print-header").html().replace("{num}",num) + $("#para-" + num).html() + $("#print-footer").html() ); w.document.close(); w.focus(); //w.print(); Don't do this otherwise chrome won't work. Look at the onload on the body of the newly created window. ///w.close(); Don't do this otherwise chrome won't work }); </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="btn printthis" data-id="1" href="#" title="Print Para 1"><i class="fa fa-print"></i> Print Para 1</a> <a class="btn printthis" data-id="2" href="#" title="Print Para 2"><i class="fa fa-print"></i> Print Para 2</a> <p class="para" id="para-1"> Para 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p class="para" id="para-2"> Para 2 : Lorem 2 ipsum 2 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
解决方案11
7 2016-11-02 21:15:20
The accepted solution wasn't working.接受的解决方案不起作用。 Chrome was printing a blank page because it wasn't loading the image in time. Chrome 正在打印一个空白页，因为它没有及时加载图像。 This approach works:这种方法有效：
Edit: It appears the accepted solution was modified after my post.编辑：看来接受的解决方案在我的帖子之后被修改了。 Why the downvote?为什么投反对票？ This solution works as well.该解决方案也有效。
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
return true;
}
解决方案12
4 2013-01-06 22:17:46
I know this is an old question, but I solved this problem w jQuery.我知道这是一个老问题，但我用 jQuery 解决了这个问题。
function printContents(id) {
var contents = $("#"+id).html();
if ($("#printDiv").length == 0) {
var printDiv = null;
printDiv = document.createElement('div');
printDiv.setAttribute('id','printDiv');
printDiv.setAttribute('class','printable');
$(printDiv).appendTo('body');
}
$("#printDiv").html(contents);
window.print();
$("#printDiv").remove();
}
CSS CSS
@media print {
.non-printable, .fancybox-outer { display: none; }
.printable, #printDiv {
display: block;
font-size: 26pt;
}
}
解决方案13
4 2018-03-15 14:26:05
If you want to have all the styles from the original document (including inline styles) you can use this approach.如果您想拥有原始文档中的所有样式（包括内联样式），您可以使用这种方法。
- Copy the complete document复制完整的文件
- Replace the body with the element your want to print.用您要打印的元素替换正文。
Implementation:执行：
class PrintUtil {
static printDiv(elementId) {
let printElement = document.getElementById(elementId);
var printWindow = window.open('', 'PRINT');
printWindow.document.write(document.documentElement.innerHTML);
setTimeout(() => { // Needed for large documents
printWindow.document.body.style.margin = '0 0';
printWindow.document.body.innerHTML = printElement.outerHTML;
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10*/
printWindow.print();
printWindow.close();
}, 1000)
}
}
解决方案14
3 2014-01-19 06:55:16
Although @BC answer was the best to print a single page.尽管@BC 的答案是打印单页的最佳选择。
But To print multiple pages of A4 size at same time with ctrl+P following solution may help.但是要使用 ctrl+P 同时打印多页 A4 大小的页面，以下解决方案可能会有所帮助。
@media print{
html *{
height:0px!important;
width:0px !important;
margin: 0px !important;
padding: 0px !important;
min-height: 0px !important;
line-height: 0px !important;
overflow: visible !important;
visibility: hidden ;
}
/*assing myPagesClass to every div you want to print on single separate A4 page*/
body .myPagesClass {
z-index: 100 !important;
visibility: visible !important;
position: relative !important;
display: block !important;
background-color: lightgray !important;
height: 297mm !important;
width: 211mm !important;
position: relative !important;
padding: 0px;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
orphans: 0!important;
widows: 0!important;
overflow: visible !important;
page-break-after: always;
}
@page{
size: A4;
margin: 0mm ;
orphans: 0!important;
widows: 0!important;
}}
解决方案15
3 2010-02-12 21:53:28
- Open a new window打开一个新窗口
- Open the document object of the new window and write into it a simple document containing nothing but the div you've got and necessary html header etc - you may also want to have the document pull in a stylesheet, depending on your content is打开新窗口的文档对象并在其中写入一个简单的文档，其中只包含您拥有的 div 和必要的 html 标题等 - 您可能还希望将文档拉入样式表，具体取决于您的内容是
- Put a script in the new page to call window.print()在新页面中放一个脚本来调用window.print()
- Trigger the script触发脚本
解决方案16
2 2012-07-27 10:56:48
Here is my jquery print plugin这是我的 jquery 打印插件
(function ($) {
$.fn.printme = function () {
return this.each(function () {
var container = $(this);
var hidden_IFrame = $('<iframe></iframe>').attr({
width: '1px',
height: '1px',
display: 'none'
}).appendTo(container);
var myIframe = hidden_IFrame.get(0);
var script_tag = myIframe.contentWindow.document.createElement("script");
script_tag.type = "text/javascript";
script = myIframe.contentWindow.document.createTextNode('function Print(){ window.print(); }');
script_tag.appendChild(script);
myIframe.contentWindow.document.body.innerHTML = container.html();
myIframe.contentWindow.document.body.appendChild(script_tag);
myIframe.contentWindow.Print();
hidden_IFrame.remove();
});
};
})(jQuery);
解决方案17
2 2014-05-19 00:04:09
Here is an IFrame solution that works for IE and Chrome:这是适用于 IE 和 Chrome 的 IFrame 解决方案：
function printHTML(htmlString) {
var newIframe = document.createElement('iframe');
newIframe.width = '1px';
newIframe.height = '1px';
newIframe.src = 'about:blank';
// for IE wait for the IFrame to load so we can access contentWindow.document.body
newIframe.onload = function() {
var script_tag = newIframe.contentWindow.document.createElement("script");
script_tag.type = "text/javascript";
var script = newIframe.contentWindow.document.createTextNode('function Print(){ window.focus(); window.print(); }');
script_tag.appendChild(script);
newIframe.contentWindow.document.body.innerHTML = htmlString;
newIframe.contentWindow.document.body.appendChild(script_tag);
// for chrome, a timeout for loading large amounts of content
setTimeout(function() {
newIframe.contentWindow.Print();
newIframe.contentWindow.document.body.removeChild(script_tag);
newIframe.parentElement.removeChild(newIframe);
}, 200);
};
document.body.appendChild(newIframe);
}
解决方案18
2 2017-12-07 10:02:16
Note: This works with jQuery enabled sites only注意：这仅适用于启用 jQuery 的网站
It is very simple with this cool trick.这个很酷的技巧非常简单。 It worked for me in Google Chrome browser.它在Google Chrome浏览器中对我有用。 Firefox wont allow you to print to PDF without a plugin. Firefox 不允许您在没有插件的情况下打印为 PDF。
- First, open the inspector using (Ctrl + Shift + I) / (Cmd + Option + I).首先，使用 (Ctrl + Shift + I) / (Cmd + Option + I) 打开检查器。
- Type this code in the console:在控制台中键入此代码：
var jqchild = document.createElement('script');
jqchild.src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.5.1/jQuery.print.min.js";
document.getElementsByTagName('body')[0].appendChild(jqchild);
$("#myDivWithStyles").print(); // Replace ID with yours
- It launches the print dialog.它启动打印对话框。 Take a physical print or save it to PDF(in chrome).进行物理打印或将其保存为 PDF（在 chrome 中）。 Done!完毕！
The logic is simple.逻辑很简单。 We are creating a new script tag and attaching it in front of closing body tag.我们正在创建一个新的脚本标签并将其附加在结束正文标签的前面。 We injected a jQuery print extension into the HTML.我们在 HTML 中注入了一个 jQuery 打印扩展。 Change myDivWithStyles with your own Div tag ID.使用您自己的 Div 标签 ID 更改myDivWithStyles 。 Now it takes cares of preparing a printable virtual window.现在它负责准备可打印的虚拟窗口。
Try it on any site.在任何网站上尝试。 Only caveat is sometimes trickily written CSS can cause missing of styles.唯一需要注意的是，有时复杂的 CSS 会导致样式丢失。 But we get the content most of times.但我们大多数时候都会得到内容。
解决方案19
2 2021-01-29 10:25:58
解决方案20
2 2021-06-08 00:19:24
Its bit late but I found this to be really really nice!!!有点晚了，但我发现这真的很好！
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;
}
解决方案21
1 2013-02-19 18:02:05
In Opera, try:在 Opera 中，尝试：
print_win.document.write('</body></html>');
print_win.document.close(); // This bit is important
print_win.print();
print_win.close();
解决方案22
1 2016-04-02 11:29:17
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 helps.希望这可以帮助。
解决方案23
1 2017-02-15 10:17:09
I modified @BillPaetski answer to use querySelector, add optional CSS, remove the forced H1 tag and make title optionally specified or pulled from window.我修改了@BillPaetski 答案以使用 querySelector、添加可选 CSS、删除强制 H1 标记并使标题可选地指定或从窗口中拉出。 It also doesn't auto-print any more and exposes internals so they can be switched out in wrapper function or as you like.它也不再自动打印并暴露内部结构，因此可以在包装器功能或您喜欢的情况下切换它们。
The only two private vars are tmpWindow and tmpDoc although I believe title, css and elem access may vary it should be assumed all function arguments are private.仅有的两个私有变量是 tmpWindow 和 tmpDoc，尽管我相信 title、css 和 elem 访问可能会有所不同，应该假设所有函数参数都是私有的。
代码：
function PrintElem(elem, title, css) { var tmpWindow = window.open('', 'PRINT', 'height=400,width=600'); var tmpDoc = tmpWindow.document; title = title || document.title; css = css || ""; this.setTitle = function(newTitle) { title = newTitle || document.title; }; this.setCSS = function(newCSS) { css = newCSS || ""; }; this.basicHtml5 = function(innerHTML) { return '<!doctype html><html>'+(innerHTML || "")+'</html>'; }; this.htmlHead = function(innerHTML) { return '<head>'+(innerHTML || "")+'</head>'; }; this.htmlTitle = function(title) { return '<title>'+(title || "")+'</title>'; }; this.styleTag = function(innerHTML) { return '<style>'+(innerHTML || "")+'</style>'; }; this.htmlBody = function(innerHTML) { return '<body>'+(innerHTML || "")+'</body>'; }; this.build = function() { tmpDoc.write( this.basicHtml5( this.htmlHead( this.htmlTitle(title) + this.styleTag(css) ) + this.htmlBody( document.querySelector(elem).innerHTML ) ) ); tmpDoc.close(); // necessary for IE >= 10 }; this.print = function() { tmpWindow.focus(); // necessary for IE >= 10*/ tmpWindow.print(); tmpWindow.close(); }; this.build(); return this; }
Usage:
用法：
DOMPrinter = PrintElem('#app-container'); DOMPrinter.print();
解决方案24
1 2021-04-14 13:39:14
This should work:这应该有效：
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
解决方案25
1 2021-07-26 19:54:59
HTML > HEAD HTML > 头部
<script type="text/javascript">
function printDiv() {
var divToPrint = document.getElementById('printArea');
//Firefox was just opening a new window with same content as opener and not performing the printing dialog, so needed to make it open a new instance of the window opener
newWin= window.open(self.location.href);
//We want to format the document appropriately
newWin.document.write("\<!DOCTYPE html\>\<html lang='es'\>\<head\>\<meta charset='utf-8'\/\>\<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'\>\<meta name='HandheldFriendly' content='true'\/\>");
//HTML ELEMENTS THAT WE WANT TO HIDE FROM THE PRINTING AREA
newWin.document.write("<style type='text/css'>@media print{.dataTables_info,.dataTables_filter{height:0!important;width:0!important;margin:0!important;padding:0!important;min-height:0!important;line-height:0!important;overflow:visible!important;visibility:hidden}");
//General Styling for Printing
newWin.document.write("body {z-index:100!important;visibility:visible!important;position:relative!important;display:block!important;background-color:lightgray!important;height:297mm!important;width:211mm!important;position:relative!important;padding:0;top:0!important;left:0!important;margin:0!important;orphans:0!important;widows:0!important;overflow:visible!important;page-break-after:always}");
//Some forced styling in css rules includying page break for a div
newWin.document.write("body h1{font-size:1em; font-family:Verdana;} a.marked{color:black; text-decoration:none} .pagebreak { page-break-before: always; } ");
newWin.document.write("@page{size:A4; margin:2em; orphans:0!important;widows:0!important}}</style>\<\/head>\<body>");
newWin.document.write(divToPrint.innerHTML);
newWin.document.write("</body></html>");
newWin.focus();
newWin.print();
}
</script>
HTML > BODY HTML > 正文
<div id="printArea">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<!-- Page break -->
<div class="pagebreak"> </div>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
解决方案26
0 2018-08-01 12:13:19
The below code copies all relevant nodes that are targeted by the query selector, copies over their styles as seen on screen, since many parent elements used for targeting the css selectors will be missing.下面的代码复制了查询选择器所针对的所有相关节点，复制了它们在屏幕上看到的样式，因为用于定位 css 选择器的许多父元素将丢失。 This causes a bit of lag if there are a lot of child nodes with a lot of styles.如果有很多具有很多样式的子节点，这会导致一些延迟。
Ideally you'd have a print style sheet ready, but this is for use cases where there's no print style sheet to be inserted and you wish to print as seen on screen.理想情况下，您应该准备好打印样式表，但这适用于没有要插入的打印样式表并且您希望在屏幕上看到的打印的用例。
If you copy the below items in the browser console on this page it will print all the code snippets on this page.如果您在此页面的浏览器控制台中复制以下项目，它将打印此页面上的所有代码片段。
+function() {
/**
* copied from https://stackoverflow.com/questions/19784064/set-javascript-computed-style-from-one-element-to-another
* @author Adi Darachi https://stackoverflow.com/users/2318881/adi-darachi
*/
var copyComputedStyle = function(from,to){
var computed_style_object = false;
//trying to figure out which style object we need to use depense on the browser support
//so we try until we have one
computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from,null);
//if the browser dose not support both methods we will return null
if(!computed_style_object) return null;
var stylePropertyValid = function(name,value){
//checking that the value is not a undefined
return typeof value !== 'undefined' &&
//checking that the value is not a object
typeof value !== 'object' &&
//checking that the value is not a function
typeof value !== 'function' &&
//checking that we dosent have empty string
value.length > 0 &&
//checking that the property is not int index ( happens on some browser
value != parseInt(value)
};
//we iterating the computed style object and compy the style props and the values
for(property in computed_style_object)
{
//checking if the property and value we get are valid sinse browser have different implementations
if(stylePropertyValid(property,computed_style_object[property]))
{
//applying the style property to the target element
to.style[property] = computed_style_object[property];
}
}
};
// Copy over all relevant styles to preserve styling, work the way down the children tree.
var buildChild = function(masterList, childList) {
for(c=0; c<masterList.length; c++) {
var master = masterList[c];
var child = childList[c];
copyComputedStyle(master, child);
if(master.children && master.children.length > 0) {
buildChild(master.children, child.children);
}
}
}
/** select elements to print with query selector **/
var printSelection = function(querySelector) {
// Create an iframe to make sure everything is clean and ordered.
var iframe = document.createElement('iframe');
// Give it enough dimension so you can visually check when modifying.
iframe.width = document.width;
iframe.height = document.height;
// Add it to the current document to be sure it has the internal objects set up.
document.body.append(iframe);
var nodes = document.querySelectorAll(querySelector);
if(!nodes || nodes.length == 0) {
console.error('Printing Faillure: Nothing to print. Please check your querySelector');
return;
}
for(i=0; i < nodes.length; i++) {
// Get the node you wish to print.
var origNode = nodes[i];
// Clone it and all it's children
var node = origNode.cloneNode(true);
// Copy the base style.
copyComputedStyle(origNode, node);
if(origNode.children && origNode.children.length > 0) {
buildChild(origNode.children, node.children);
}
// Add the styled clone to the iframe. using contentWindow.document since it seems the be the most widely supported version.
iframe.contentWindow.document.body.append(node);
}
// Print the window
iframe.contentWindow.print();
// Give the browser a second to gather the data then remove the iframe.
window.setTimeout(function() {iframe.parentNode.removeChild(iframe)}, 1000);
}
window.printSelection = printSelection;
}();
printSelection('.default.prettyprint.prettyprinted')
解决方案27
0 2019-01-21 13:29:00
This is realy old post but here is one my update what I made using correct answer.这是一个非常老的帖子，但这是我使用正确答案所做的更新。 My solution also use jQuery.我的解决方案也使用 jQuery。
Point of this is to use proper print view, include all stylesheets for the proper formatting and also to be supported in the most browsers.这一点是使用正确的打印视图，包括所有样式表以进行正确的格式化，并且在大多数浏览器中都得到支持。
function PrintElem(elem, title, offset)
{
// Title constructor
title = title || $('title').text();
// Offset for the print
offset = offset || 0;
// Loading start
var dStart = Math.round(new Date().getTime()/1000),
$html = $('html');
i = 0;
// Start building HTML
var HTML = '<html';
if(typeof ($html.attr('lang')) !== 'undefined') {
HTML+=' lang=' + $html.attr('lang');
}
if(typeof ($html.attr('id')) !== 'undefined') {
HTML+=' id=' + $html.attr('id');
}
if(typeof ($html.attr('xmlns')) !== 'undefined') {
HTML+=' xmlns=' + $html.attr('xmlns');
}
// Close HTML and start build HEAD
HTML+='><head>';
// Get all meta tags
$('head > meta').each(function(){
var $this = $(this),
$meta = '<meta';
if(typeof ($this.attr('charset')) !== 'undefined') {
$meta+=' charset=' + $this.attr('charset');
}
if(typeof ($this.attr('name')) !== 'undefined') {
$meta+=' name=' + $this.attr('name');
}
if(typeof ($this.attr('http-equiv')) !== 'undefined') {
$meta+=' http-equiv=' + $this.attr('http-equiv');
}
if(typeof ($this.attr('content')) !== 'undefined') {
$meta+=' content=' + $this.attr('content');
}
$meta+=' />';
HTML+= $meta;
i++;
}).promise().done(function(){
// Insert title
HTML+= '<title>' + title + '</title>';
// Let's pickup all CSS files for the formatting
$('head > link[rel="stylesheet"]').each(function(){
HTML+= '<link rel="stylesheet" href="' + $(this).attr('href') + '" />';
i++;
}).promise().done(function(){
// Print setup
HTML+= '<style>body{display:none;}@media print{body{display:block;}}</style>';
// Finish HTML
HTML+= '</head><body>';
HTML+= '<h1 class="text-center mb-3">' + title + '</h1>';
HTML+= elem.html();
HTML+= '</body></html>';
// Open new window
var printWindow = window.open('', 'PRINT', 'height=' + $(window).height() + ',width=' + $(window).width());
// Append new window HTML
printWindow.document.write(HTML);
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10*/
console.log(printWindow.document);
/* Make sure that page is loaded correctly */
$(printWindow).on('load', function(){
setTimeout(function(){
// Open print
printWindow.print();
// Close on print
setTimeout(function(){
printWindow.close();
return true;
}, 3);
}, (Math.round(new Date().getTime()/1000) - dStart)+i+offset);
});
});
});
}
Later you simple need something like this:稍后你简单地需要这样的东西：
$(document).on('click', '.some-print', function() {
PrintElem($(this), 'My Print Title');
return false;
});
Try it.试试看。
解决方案28
0 2022-06-25 12:12:42
pass the Element to this function to print:将元素传递给此函数以打印：
function printElm(elm) { var orig = document.body.innerHTML; document.body.innerHTML = elm.outerHTML; print(); document.body.innerHTML = orig; }
解决方案29
0 2022-08-17 04:11:12
function printDomElement(element) {
element.classList.add("printCss");
let printId = "printId";
let name = ".printCss";
let rules = "-webkit-print-color-adjust:exact;height:100%;width:100%;position:fixed;top:0;left:0;margin:0;";
var style = document.createElement('style');
style.id = printId;
style.media = "print";
document.getElementsByTagName('head')[0].appendChild(style);
if (!(style.sheet || {}).insertRule)(style.styleSheet || style.sheet).addRule(name, rules);
else style.sheet.insertRule(name + "{" + rules + "}", 0);
window.print();
setTimeout(() => {
element.classList.remove("printCss");
let elem = document.getElementById(printId);
if (elem) elem.remove();
}, 500);
}
解决方案30
-1 2013-10-17 19:38:26
Same as best answer, just in case you need to print image as i did:与最佳答案相同，以防您需要像我一样打印图像：
In case you want to print image:如果要打印图像：
function printElem(elem)
{
Popup(jQuery(elem).attr('src'));
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<img src="'+data+'" />');
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
解决方案31
-5 2010-02-12 21:45:48
The best way to do it would be to submit the contents of the div to the server and open a new window where the server could put those contents into the new window.最好的方法是将 div 的内容提交到服务器并打开一个新窗口，服务器可以将这些内容放入新窗口中。
If that's not an option you can try to use a client-side language like javascript to hide everything on the page except that div and then print the page...如果这不是一个选项，您可以尝试使用像 javascript 这样的客户端语言来隐藏页面上除该 div 之外的所有内容，然后打印页面......
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.