打印<div id="printarea"></div> only?

如何打印指定的div(无需手动禁用页面上的所有其他内容)?

我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。

该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。

当前回答

使用特殊的样式表进行打印

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

然后添加一个类，即。"noprint"到每个你不想打印的内容的标签。

在CSS中使用

.noprint {
  display: none;
}

2009-01-22 12:14:11

其他回答

你可以使用一个单独的CSS样式来禁用除id为“printarea”的所有其他内容。

参见CSS设计:准备打印以获得更多的解释和示例。

2009-01-22 12:14:16

如果你只想打印这个div，你必须使用指令:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}

2009-01-22 17:21:44

基于@Kevin Florida的回答，我做了一种方法来避免当前页面上的脚本因为覆盖内容而禁用。我使用其他文件称为“printScreen.php”(或。html)。把你想打印的所有东西都包装在一个div“printSource”中。用javascript，打开一个你之前创建的新窗口(“printScreen.php”)，然后在顶部窗口的“printSource”中抓取内容。

这是代码。

主窗口:

echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";

//add button or link to print
echo "<button id='btnPrint'>Print</button>";

<script>
  $("#btnPrint").click(function(){
    printDiv("printSource");
  });

  function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
   }
</script>

这是“printScreen.php”-另一个文件抓取内容打印

<head>
// write everything about style/script here (.css, .js)

</head>
<body id='mainBody'></body>
</html>


<script>
    //get everything you want to print from top window
    src = window.opener.document.getElementById("printSource").innerHTML;

    //paste to "mainBody"
    $("#mainBody").html(src);
    window.print();
    window.close();
</script>

2020-01-16 01:39:50

printDiv()函数出现了几次，但在这种情况下，将丢失所有绑定元素和输入值。所以，我的解决方案是为所有名为“body_allin”的东西创建一个div，并在第一个名为“body_print”的外部创建另一个div。

然后调用这个函数:

function printDiv(divName){

    var printContents = document.getElementById(divName).innerHTML;

    document.getElementById("body_print").innerHTML = printContents;

    document.getElementById("body_allin").style.display = "none";
    document.getElementById("body_print").style.display = "";

    window.print();

    document.getElementById("body_print").innerHTML = "";
    document.getElementById("body_allin").style.display = "";
    document.getElementById("body_print").style.display = "none";

}

2014-02-27 17:47:42

步骤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>

2013-04-09 11:38:46

打印<div id="printarea"></div> only?

推荐文章

最新文章

标签