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

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

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


当前回答

总的来说,这些答案我都不太喜欢。如果你有一个类(比如printableArea),并把它作为body的直接子类,那么你可以在你的print CSS中这样做:

body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

对于那些在其他地方寻找printableArea的人,你需要确保显示printableArea的父元素:

body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

使用可见性可能会导致大量间距问题和空白页面。这是因为可见性保持了元素的空间,只是将其隐藏起来,而在显示时将其移除,并允许其他元素占用其空间。

这个解决方案有效的原因是您不需要抓取所有元素,只需要将body的直接子元素隐藏起来。下面的其他解决方案使用display css,隐藏所有元素,这将影响printableArea内容内的所有内容。

我不建议使用javascript,因为你需要有一个用户点击的打印按钮,而标准的浏览器打印按钮不会有同样的效果。如果你真的需要这样做,我会做的是存储主体的html,删除所有不需要的元素,打印,然后添加回html。如前所述,我将避免这种情况,如果你可以和使用CSS选项如上所述。

注意:你可以添加任何CSS到打印CSS使用内联样式:

<style type="text/css">
@media print {
   //styles here
}
</style>

或者像我通常使用的链接标签:

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

其他回答

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

这里有一个通用的解决方案,只使用CSS,我已经验证工作。

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

其他方法都不太好。使用display很棘手,因为如果任何元素都没有display:none,那么它的后代也不会显示。要使用它,您必须更改页面的结构。

使用可见性效果更好,因为您可以为后代打开可见性。但是,不可见的元素仍然会影响布局,所以我将section-to-print移到左上角,以便正确打印。

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

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

print.css:

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

试试这个:

function printElement($elem){
    var $customPrintSection = document.getElementById('customPrintSection'),
        $customPrintSectionCss = document.getElementById('customPrintSectionCss');

    if ($customPrintSection){
        $customPrintSection.remove();
    }

    if ($customPrintSectionCss){
        $customPrintSectionCss.remove();
    }

    $customPrintSection = document.createElement('div');
    $customPrintSection.id = 'customPrintSection';

    $customPrintSectionCss = document.createElement('style');
    $customPrintSectionCss.id = 'customPrintSectionCss';

    document.body.appendChild($customPrintSection);
    document.body.appendChild($customPrintSectionCss);

    $customPrintSection.innerHTML = $elem.innerHTML;
    $customPrintSectionCss.innerHTML = '@media screen { div#customPrintSection { display: none; } } @media print { body *:not(div#customPrintSection):not(div#customPrintSection *) { display: none; } div#customPrintSection a[href]:after { content: none !important; } }';

    window.print();

    $customPrintSection.remove();
    $customPrintSectionCss.remove();
}

我喜欢这个解决方案,因为它不像css解决方案那样影响整个页面,它在一个特定的答案中使所有主体元素立即不可见。所以如果需要的话,祝你能打印整页。

我也更喜欢“display: none”方法而不是“visibility: hidden”方法,所以没有必要将可打印元素设置为绝对元素并将其对齐到左上角。但我想这是主观的。

最后,它真的打败了新的窗口方法。

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