打印DIV的内容
什么是最好的方式来打印一个DIV的内容？
轻微更改早期版本 – 在CHROME上testing
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; } 我认为有一个更好的解决scheme。 使您的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; } }
虽然这已经被@gmcalab所说，如果你正在使用jQuery，你可以使用我的printElement插件。
这里有一个例子， 这里有更多关于插件的信息 。
这个用法是相当直接的，只需要用jQueryselect器来获取一个元素，然后输出：
$("myDiv").printElement();
希望它有帮助！
从这里http://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>
使用Jquery，只需使用这个函数：
<script> function printContent(el){ var restorepage = $('body').html(); var printcontent = $('#' + el).clone(); $('body').empty().html(printcontent); window.print(); $('body').html(restorepage); } </script>
您的打印button将如下所示：
<button id="print" onclick="printContent('id name of your div');" >Print</button>
编辑：如果你有表单数据，你需要保留，克隆不会复制，所以你只需要抓住所有的表单数据，并在恢复后取代它，如下所示：
<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>
创build一个单独的打印样式表，隐藏除了要打印的内容以外的所有其他元素。 加载时使用'media="print"标记：
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
这可以让你有一个完全不同的样式表加载打印输出。
如果要强制浏览器的打印对话框出现在页面上，可以使用JQuery在加载时执行此操作：
$(function() { window.print(); });
或者触发您想要的任何其他事件，例如用户单击button。
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; }
这将打印你想要的div区域，并将其内容重新设置为原来的样子。 printdivname是要打印的div。
我用Bill Paetzke答案打印一个包含图像的div，但它不适用于谷歌浏览器
我只需要添加这一行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>
也如果有人只需要打印一个ID与ID他不需要加载jQuery
这里是纯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>
我希望这可以帮助某人
我认为迄今为止提出的解决scheme有以下缺点：
- CSS媒体查询解决scheme假定只有一个div要打印。
- JavaScript解决scheme仅适用于某些浏览器。
- 销毁父窗口内容并重新创build会造成混乱。
我已经改进了上面的解决scheme。 以下是我已经testing过的东西，它具有以下好处。
- 适用于所有浏览器，包括IE，Chrome，Safari和Firefox。
- 不会销毁并重新加载父窗口。
- 可以在页面上打印任意数量的DIV。
- 使用html模板来避免容易出错的string连接。
要点注意事项：
- 必须在新创build的窗口上有一个onload =“window.print（）”。
- 不要从父级调用targetwindow.close（）或targetwindow.print（）。
- 确保你做了targetwindow.document.close（）和target.focus（）
- 我使用的是jQuery，但是你也可以使用普通的javascript来做同样的技巧。
- 你可以在这里看到这个http://math.tools/table/multiplication 。 您可以单独打印每个表格，方法是单击包装箱标题上的打印button。
<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>http://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>
我知道这是一个古老的问题，但我解决了这个问题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
@media print { .non-printable, .fancybox-outer { display: none; } .printable, #printDiv { display: block; font-size: 26pt; } }
我创作了一个插件来解决这种情况。 我对那里的插件不满，并开始做更多的扩展/configuration。
- 打开一个新窗口
- 打开新窗口的文档对象，并写入一个简单的文档，只包含你已经得到的div和必要的html头文件等等 – 你可能也想把文档拉到一个样式表中，这取决于你的内容是
- 把一个脚本放在新的页面中调用window.print（）
- 触发脚本
尽pipe@BC答案是打印单页最好的。
但是要用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; }}
这是我的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);
在Opera中，请尝试：
print_win.document.write('</body></html>'); print_win.document.close(); // This bit is important print_win.print(); print_win.close();
我修改@BillPaetski答案使用querySelector，添加可选的CSS，删除强制H1标签，并使标题可选指定或从窗口拉。 它也不会自动打印，并暴露内部，所以它们可以在包装function或只要你喜欢。
唯一的两个私人variables是tmpWindow和tmpDoc，尽pipe我相信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; }
用法：
DOMPrinter = PrintElem('#app-container'); DOMPrinter.print();
这是一个适用于IE和Chrome的IFrame解决scheme：
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); }
创build了一些通用的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();
希望这可以帮助。
接受的解决scheme不起作用。 Chrome浏览器正在打印空白页面，因为它没有及时加载图像。 这种方法工作：
编辑：看来接受的解决scheme后，我的职位修改。 为什么downvote？ 该解决scheme也适用。
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; }
相同的最佳答案，以防万一你需要像我一样打印图像：
如果你想打印图像：
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; }
最好的办法是将div的内容提交给服务器，并打开一个新窗口，服务器可以把这些内容放到新窗口中。
如果这不是一个选项，你可以尝试使用像javascript这样的客户端语言来隐藏除div之外的所有内容，然后打印页面…
