2013-06-17 10 views
7

Używam print css, aby ukryć pewne elementy, a także aby zatrzymać podziały strony, gdy ich nie chcę. Użytkownik może ukryć sekcje przed ich wydrukowaniem.Dodatkowa pusta strona po wydrukowaniu (z wyjątkiem IE) - czy to moje drukowanie css?

Mój problem polega na tym, że kiedy wyświetlam podgląd wydruku, zawsze jest dodatkowa pusta strona (na końcu w przeglądarce Chrome i Firefox oraz na początku w Operze) i nie mogę zrozumieć dlaczego. IE nie ma problemu, żadnych dodatkowych stron (co jest szokujące ...)

Byłbym bardzo wdzięczny za niektóre dane wejściowe. Próbowałem zrobić podział strony div-break-after: unikać; i page-break-after: auto; ale żaden nie zadziałał. Wyciągnięcie również table.plain {page-break-inside: avoid; } nie miało znaczenia.

Klasa wykluczeń jest dodawana do tabeli, gdy użytkownik kliknie ikonę ukrywania. Działa to i wszystko, co ma klasę wykluczeń, nie jest wyświetlane w formie wydruku. Ostatnia strona, którą użytkownik chce wydrukować, może zmieścić się na jednej stronie lub nie.

Tu jest mój HTML:

<body> 
    <div id="main"> 
     <div id="content"> 
      <div id="side" class="exclude"> 
       ...logo, etc, shown at side on screen... 
      </div>    
      <div id="data"> 
       <table class="printOnly plain printHeader"> 
        ...logo, etc, to print at top... 
       </table>     
       <div> 
        <table class="detail plain"> 
         <tbody> 
          <tr> 
           <td class="rel"> 
            <div class="abs exclude visibility"> 
             <a href="#" class="show ico-show ico hid">Show</a> 
             <a href="#" class="hide ico-hide ico">Hide</a> 
            </div> 
            <h3>Contact</h3> 
           </td> 
          </tr> 
          ...more tr with contact details... 
         </tbody> 
        </table> 
        ...more tables with other details... 
       </div> 
      </div> //data 
     </div> //content 
    </div> //main 
</body> 

Oto mój druk css:

@media print { 
    .exclude { 
     display: none !important; 
    } 

    .printOnly { 
     display:block !important; 
    } 

    div#data, 
    div#data div { 
     width: 98% !important; 
     border: none !important; 
    } 

    table.plain { page-break-inside:avoid; } 
} 

Wiele z góry dzięki za pomoc :)

+0

Nie, że powinna ona znaczenia , ale czy próbowałeś ustawić wysokość 0 wykluczonych elementów? – Nix

+0

Podaj wersje IE, z którymi masz problemy. – Spudley

+0

@Nix - dziękuję za sugestię, ale to nie miało znaczenia. – tekiegirl

Odpowiedz

0

będę sugerować, aby spróbować używając resetowania CSS. Resetowanie ma pomóc różnym przeglądarkom wyświetlać stronę w ten sam sposób. Możesz spróbować tego na http://meyerweb.com/eric/tools/css/reset/, ale nigdy go nie używałem, więc nie mogę powiedzieć, jak to zadziała. Możesz także spróbować użyć google do resetowania CSS specjalnie dla stylów drukowania.

0

Dla przeglądarki Firefox: Jeśli pusta strona jest widoczna w podglądzie wydruku, przejdź do drukowania -> Ustawienia strony i zmniejsz skalę, aż puste zniknie z podglądu wydruku. To działało dla mnie.

13

Większość czasu będziesz określić

html, body { width: 100%; height: 100%; } 

sterowniku drukarki w przeglądarce nie podoba. Aby to naprawić, po prostu dodaj to do pliku print.css

html, body { height: auto; } 

Koniec z drukowaniem pustych stron.

roztwór jest wyjaśnione w tym page nadziei pomaga każdy

+0

Rozwiązał to dla mnie. Zaimplementowałem go za pomocą zapytania o media w SCSS. –

0

Aby rozwiązać ten problem przy użyciu kwerendy mediów zamiast oddzielnego print.css, spróbuj wykonać następujące czynności:

html, body { 
    height: 100%; 
    @media print { 
     /* This fixes an issue where when printing a selection, 
     an extra blank page is printed in IE10 and IE11. 
     Solution found here: http://stackoverflow.com/a/22320644/7752 */ 
     height: auto; 
    } 
} 
Powiązane problemy