打印時刪除空白頁 - 使用可見性：隱藏

我有一個頁面顯示許多帖子，並允許打印一個帖子（一個div及其所有孩子）。打印時刪除空白頁 - 使用可見性：隱藏

隨着點擊打印按鈕，我經過的每一個元素的網頁和風格上，如下所示：

打印設置爲類printme其風格top和left性能到div 0並將position設置爲absolute。
股利打印的孩子單獨
左如果該元素是div打印的父母，我加入這臺visibility: hidden類。
否則，我添加一個類設置display: none。這個輸出如下所示。

一切正常，只是一個空白頁打印罰款 - 這我假設是由於使用visibility: hidden隱藏內容，因此仍然佔用空間父div的。

有沒有辦法打印我的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>

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

來源

2016-12-17 mseifert

使用@media打印這樣的：

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

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

}

來源

2016-12-17 07:24:11

我代替我的HTML，身體{}與你，但還是我得到2頁。 – mseifert

您嘗試過使用！重要頁面打破後：避免！重要; ＆page-break-before：avoid！important;像這樣 – 2016-12-17 07:31:12

是的，仍然有2頁。 – mseifert

打印時刪除空白頁 - 使用可見性：隱藏

回答

相關問題