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

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

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

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

当前回答

适合空间空高度的最佳css:

@media print {
  body * {
    visibility: hidden;
    height:0;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
    height:auto;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

2018-04-19 08:20:53

其他回答

基于@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

在css3中，你可以使用以下功能:

body *:not(#printarea) {
    display: none;
}

2009-01-22 12:14:31

@Kevin佛罗里达如果你有同一个类的多个div，你可以这样使用它:

 <div style="display:none">
   <div id="modal-2" class="printableArea">
     <input type="button" class="printdiv-btn" value="print a div!" />
   </div>
 </div>

我使用的是Colorbox内内容类型

$(document).on('click', '.printdiv-btn', function(e) {
    e.preventDefault();

    var $this = $(this);
    var originalContent = $('body').html();
    var printArea = $this.parents('.printableArea').html();

    $('body').html(printArea);
    window.print();
    $('body').html(originalContent);
});

2015-09-15 08:03:36

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

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

2009-01-22 12:14:16

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;
    
      }

2021-07-27 12:01:05

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

推荐文章

最新文章

标签