如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框,所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格,其中一个包含了我想打印的div -表格是用web的视觉样式设计的,不应该显示在打印中。
如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框,所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格,其中一个包含了我想打印的div -表格是用web的视觉样式设计的,不应该显示在打印中。
当前回答
步骤1:在head标记中编写以下javascript代码
<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById(DivID).innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
docprint.document.write('<head><title>My Title</title>');
docprint.document.write('<style type="text/css">body{ margin:0px;');
docprint.document.write('font-family:verdana,Arial;color:#000;');
docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
docprint.document.write('a{color:#000;text-decoration:none;} </style>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write(content_vlue);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
</script>
步骤2:通过onclick事件调用PrintMe('DivID')函数。
<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>
其他回答
It's better solution. You can use it Angualr/React
Html
<div class="row" id="printableId">
Your html
</div>
Javascript
function printPage(){
var printHtml = window.open('', 'PRINT', 'height=400,width=600');
printHtml.document.write('<html><head>');
printHtml.document.write(document.getElementById("printableId").innerHTML);
printHtml.document.write('</body></html>');
printHtml.document.close();
printHtml.focus(); = 10*/
printHtml.print();
printHtml.close();
return true;
}
使用jQuery,它就像这样简单:
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
你可以用这个: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/
或者使用visibility:visible和visibility:hidden css属性和@media print{}
'display:none'将隐藏所有嵌套的'display:block'。这不是解。
我有一个用最少代码更好的解决方案。
把你的可打印部分放在一个div中,像这样的id:
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
然后添加一个事件,如onclick(如上所示),并像上面所做的那样传递div的id。
现在让我们创建一个非常简单的javascript:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
注意到这有多简单了吗?没有弹出窗口,没有新窗口,没有疯狂的样式,没有像jquery这样的JS库。真正复杂的解决方案(答案并不复杂,也不是我指的)的问题是,它永远不会在所有浏览器上转换,永远!如果您想让样式有所不同,可以按照选中的答案所示,将media属性添加到样式表链接(media="print")。
没有绒毛,重量很轻,很好用。
我有多个图像,每个图像都有一个按钮,需要单击一个按钮来打印每个带有图像的div。如果我在浏览器中禁用了缓存,并且图像大小在Chrome中没有改变,这个解决方案就可以工作:
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;
}
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />