javascript - 打印 Javascript 为空白，显示 : block/none

Question

此论坛中有人帮助我使用 Javascript 打印一个 div。但是当我不想要的内容显示为无，并为我想要打印的 div 显示 block 时，我的打印功能显示一个空白页。

但是如果我将可见性设置为:隐藏/可见，我的打印工作但我得到的结果有很多白页，因为仅可行性是隐藏的

我做了一个代码笔: enter link description here

我的 CSS:`

body * {
    display: none !important;
  }
  .print-div, .print-div * {
    display: block !important;
  }`

Javascript

    function addPrintClassAndPrintDiv(divId) {

   //remove .print-div class from all element if any 
     $(".print-div").removeClass("print-div"); 

   //add .print-div class to that div you want to print
     $("#"+divId).addClass("print-div");

   //print 
      window.print();
}

所以我想要打印任何 div 的可能性，结果是只在一页中打印每个 div

谢谢!

Answer 1

我相信对您来说最简单的解决方案是采用您概述的可见性隐藏/可见方法，并简单地制作所有没有 print-div 的元素。类 height: 0 .假设您要打印或隐藏的所有元素(您的 print-divs)都是 <article>您可以使用以下 CSS 的元素:

body * {
    visibility: hidden;
}

.print-div, .print-div * {
    visibility: visible;
}

article:not(.print-div) {
    height: 0;
}

:not()伪选择器将针对所有没有 print-div 的元素类。