打印Javascript为空白,显示:block / none

时间:2016-06-04 17:57:39

标签: javascript html css printing

此论坛中有人帮我用Javascript打印div。 但是当一个放置显示没有我不想要的内容和我想要打印的div的显示块时,我的打印功能显示一个空白页。

但是,如果我把可见性:隐藏/可见,我的打印工作,但我得到了我的结果与许多白页的可行性原因只是隐藏

我做了一个代码笔: 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

谢谢!

1 个答案:

答案 0 :(得分:1)

我认为最简单的解决方案是采用您概述的可见性隐藏/可见方法,并简单地制作所有不具有print-divheight: 0的元素。假设您要打印或隐藏的所有元素(您的print-divs)都是<article>元素,您可以使用以下CSS:

body * {
    visibility: hidden;
}

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

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

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