打印时删除空白页-使用可见性：隐藏

Question

打印时删除空白页-使用可见性：隐藏

mse*_*ert 2 html javascript css printing

我有一个页面，其中显示许多帖子，并允许打印单个帖子（div带有所有子项的a）。

通过单击“打印”按钮，我浏览了页面上的每个元素，并将其样式设置如下：

要打印的div设置为printme将topand left属性设置position为0并设置为的类absolute。
要打印的div的孩子们一个人呆着
如果该元素是要打印的div的父级print-visibility-hide，则添加一个set 的类visibility: hidden。
否则，我添加一个set的类display: none。其输出如下所示。

一切正常，除了打印空白页外-我认为这是由于父div visibility: hidden用于隐藏内容并因此占用了空间。

有什么方法可以打印div并以某种方式删除或折叠此多余的空间？

HTML-我最终得到如下所示的内容（为简洁起见，删除了所有内容）：

<body class="print-visibility-hide">
  <div class="page-container print-visibility-hide">
    <div class="main print-visibility-hide">
      <div class="main-content d-section-top print-visibility-hide" id="main-content" style="background: transparent none repeat scroll 0% 0%; margin-left: 145px;">
        <div id="gemwrapper" class="gemwrapper print-visibility-hide" style="display: block;">
          <div class="gem-content-wrapper d-item d-section print-visibility-hide">
            <div class="gem-content-main gems print-visibility-hide">
              <div class="print-visibility-hide">
                <div style="display: block;" id="s-g1353" class="print-visibility-hide">
                  <table class="print-visibility-hide">
                    <tbody class="print-visibility-hide">
                      <tr class="item tools print-visibility-hide">
                        <td class="textarea print-visibility-hide">
                          <div id="gparent1353" class="textarea print-visibility-hide">
                            <div id="gx1353" class="printme">
                              <pre>
This is the text I am printing which can be any length.</pre>

Run Code Online (Sandbox Code Playgroud)

的CSS

@media print {
  body * {
    visibility: hidden;
  }
  html,
  body {
    height: auto;
  }
  .print-display-none,
  .print-display-none * {
    display: none !important;
  }
  .print-visibility-hide,
  .print-visibility-hide * {
    visibility: hidden !important;
  }
  .printme,
  .printme * {
    visibility: visible !important;
  }
  .printme {
    position: absolute;
    left: 0;
    top: 0;
  }
  .printme,
  .printme:last-child {
    page-break-after: avoid;
  }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 6

像这样使用@media打印：

@media print {
     html, body {
        border: 1px solid white;
        height: 99%;
        page-break-after: avoid;
        page-break-before: avoid;
     }
}

Run Code Online (Sandbox Code Playgroud)

更新2：

使用此代码：代替您的代码

@media print {
  html, body {
     border: 1px solid white;
     height: 99%;
     page-break-after: avoid !important;
     page-break-before: avoid !important;
  }
  .print-display-none,
  .print-display-none * {
    display: none !important;
  }
  .print-visibility-hide,
  .print-visibility-hide * {
    visibility: hidden !important;
  }
  .printme,
  .printme * {
    visibility: visible !important;
  }
  .printme {
    position: absolute;
    left: 0;
    top: 0;
  }

}

Run Code Online (Sandbox Code Playgroud)

我有一个矛盾的html height：100％定义，它覆盖了在@media {}中设置的内容。最后，一次将height设置为auto或将99％设置为高度后，都可以正常使用。高度定义。谢谢你的帮助。 (2认同)

归档时间：	9 年，5 月前
查看次数：	10780 次
最近记录：	9 年，5 月前