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

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

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

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

当前回答

基于@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(divId):在任何页面上打印任何div的通用解决方案。

我有一个类似的问题，但我想(a)能够打印整个页面，或(b)打印几个特定区域中的任何一个。由于上面的很多内容，我的解决方案允许您指定要打印的任何div对象。

此解决方案的关键是向打印媒体样式表添加适当的规则，以便打印所请求的div(及其内容)。

首先，创建所需的打印css来屏蔽所有内容(但没有允许您想要打印的元素的特定规则)。

<style type="text/css" media="print">
   body {visibility:hidden; }
   .noprintarea {visibility:hidden; display:none}
   .noprintcontent { visibility:hidden; }
   .print { visibility:visible; display:block; }
</style>

注意，我添加了新的类规则:

Noprintarea允许您禁止打印div中的元素——包括内容和块。 Noprintcontent允许您抑制div中元素的打印—内容被抑制，但分配的区域为空。打印让你有项目显示在打印版本，但不在屏幕上。它们通常会有“display:none”作为屏幕样式。

然后插入三个JavaScript函数。第一个选项只是打开和关闭打印媒体样式表。

function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }

第二个做真正的工作，第三个事后清理。第二个(printDiv)激活打印媒体样式表，然后追加一个新规则以允许所需的div打印，发出打印，然后在最后的清理之前添加一个延迟(否则可以在打印实际完成之前重置样式)。

function printDiv(divId)
{
  //  Enable the print CSS: (this temporarily disables being able to print the whole page)
  disableSheet(0,false);
  //  Get the print style sheet and add a new rule for this div
  var sheetObj=document.styleSheets[0];  
  var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
  if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
  else                { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
  print();
  //  need a brief delay or the whole page will print
  setTimeout("printDivRestore()",100);  
}

最后一个函数删除添加的规则，并再次将打印样式设置为禁用，以便可以打印整个页面。

function printDivRestore()
{
  // remove the div-specific rule
  var sheetObj=document.styleSheets[0];  
  if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
  else                { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
  //  and re-enable whole page printing
  disableSheet(0,true);
}

唯一要做的另一件事是在onload处理中添加一行，这样打印样式最初是禁用的，从而允许整页打印。

<body onLoad='disableSheet(0,true)'>

然后，在文档的任何地方，你都可以打印一个div。只要从按钮或其他地方发出printDiv("thedivid")即可。

这种方法的一大优点是它提供了从页面中打印选定内容的通用解决方案。它还允许对打印的元素使用现有样式——包括包含的div。

注意:在我的实现中，这必须是第一个样式表。将表引用(0)更改为适当的表号，如果需要将其置于表序列的后面。

2011-01-22 21:36:50

到目前为止，所有的答案都是有缺陷的——它们要么涉及在所有内容中添加class="noprint"，要么会在#printable中混乱显示。

我认为最好的解决方案是在不可打印的东西周围创建一个包装器:

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

当然，这并不是完美的，因为它涉及到在HTML中移动一些东西……

2009-01-22 12:28:28

嗯……使用样式表的类型进行打印…例如:

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

print.css:

div { display: none; }
#yourdiv { display: block; }

2009-01-22 12:13:15

您是否可以使用打印样式表，并使用CSS来排列想要打印的内容?阅读这篇文章获取更多的建议。

2009-01-22 12:12:20

我有多个图像，每个图像都有一个按钮，需要单击一个按钮来打印每个带有图像的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!" />

2016-10-21 14:45:43

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

推荐文章

最新文章

标签