Margines podczas drukowania strony html

141

Do drukowania używam osobnego arkusza stylów. Czy można ustawić prawy i lewy margines w arkuszu stylów, który określa margines wydruku (tj. Margines na papierze)?

Dzięki.

kobra
źródło

Odpowiedzi:

247

Podczas określania drukowania należy używać cmlub mmjako jednostki. Używanie pikseli spowoduje, że przeglądarka przetłumaczy to na coś podobnego do tego, co wygląda na ekranie. Użycie cmlub mmzapewni spójny rozmiar papieru.

body
{
  margin: 25mm 25mm 25mm 25mm;
}

W przypadku rozmiarów czcionek użyj ptdla nośnika wydruku.

Zwróć uwagę, że ustawienie marginesu na korpusie w stylu css nie dostosuje marginesu w sterowniku drukarki, który definiuje obszar drukowania drukarki, ani marginesu kontrolowanego przez przeglądarkę (może być regulowany w podglądzie wydruku w niektórych przeglądarkach) ... po prostu ustawi margines na dokumencie w obszarze drukowania.

Należy również pamiętać, że IE7 ++ automatycznie dostosowuje rozmiar do najlepszego dopasowania i powoduje, że wszystko jest nie tak, nawet jeśli używasz cmlub mm. Aby zmienić to zachowanie, użytkownik musi wybrać opcję „Podgląd wydruku”, a następnie ustawić rozmiar wydruku na 100%(domyślnie Shrink To Fit).

Lepszą opcją pełnej kontroli nad drukowanymi marginesami jest użycie @pagedyrektywy w celu ustawienia marginesu papieru, co wpłynie na margines na papierze poza elementem treści html, który jest zwykle kontrolowany przez przeglądarkę. Zobacz http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Obecnie działa to we wszystkich głównych przeglądarkach z wyjątkiem Safari.
W przeglądarce Internet Explorer margines jest faktycznie ustawiony na tę wartość w ustawieniach tego drukowania, a jeśli zrobisz Podgląd, otrzymasz to domyślnie, ale użytkownik może to zmienić w podglądzie.

@page  
{ 
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm;  
} 

body  
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px;  
} 

Powiązana odpowiedź: Czy wyłączyć opcje drukowania przeglądarki (nagłówki, stopki, marginesy) ze strony?

groza
źródło
3
Działa to teraz w Chrome 18 i IE9 (nie testowałem wcześniejszych wersji). Nadal nie działa w Firefoksie 12, ale możesz przeprowadzić wykrywanie po stronie serwera i dodać klasę treści, <body class="firefox">więc w swoim css możesz to zrobić body.firefox {margin: 0mm; padding: 0.25in;}, to jest w rzeczywistości 0,75 cala marginesu, ponieważ Firefox już dodaje 0,5 cala. Powinno to działać tak długo, jak potrzebujesz> = 0,5 cala marginesów.
MrFusion
7
+1 dla @page! Właśnie tego potrzebowałem, ponieważ drukuję wiele stron.
nalot
2
Teraz działa również z przeglądarką Firefox. Ponieważ Firefox ma dobre procedury automatycznej aktualizacji, nie powinno to już stanowić problemu, którym musimy się zajmować. Testowałem na IE, Opera, Chrome, Firefox i Safari. Jedyną przeglądarką, z którą obecnie nie współpracuje, jest Safari (wersja 5.1.7 dla Windows). Nie testowałem na Macu.
awe
1
Spowoduje to dodanie tylko górnego marginesu na pierwszej stronie. Lepsze rozwiązanie do ustawiania takich samych marginesów na wszystkich stronach: stackoverflow.com/questions/37033766/ ...
besimple
@besimple: Zobacz przykład na dole. Użycie dyrektywy ´ @ page´ spowoduje dodanie marginesu na każdej stronie.
awe
42

Po pierwsze, próbuję zmusić wszystkich moich użytkowników do korzystania z Chrome podczas drukowania, ponieważ inne przeglądarki tworzą różne układy.

Odpowiedź na to pytanie zaleca:

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

Jednak skończyło się na tym, że użyłem tego CSS do wydrukowania wszystkich moich stron:

@media print 
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}



Przypadek specjalny: długie stoły

Kiedy musiałem wydrukować tabelę na kilku stronach, znak margin:0z @pagekropką prowadził do krwawienia krawędzi:

krwawiące krawędzie

Mogłem to rozwiązać dzięki tej odpowiedzi :

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

Plus ustawienie górnych dolnych marginesów dla @page:

@page { 
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

Wynik:

rozwiązane krwawiące krawędzie

Wolałbym rozwiązanie, które jest zwięzłe i działa we wszystkich przeglądarkach. Na razie mam nadzieję, że powyższe informacje mogą pomóc niektórym programistom z podobnymi problemami.

Kai Noack
źródło
1
Twoje rozwiązanie okazało się nieocenione podczas pracy z drukowaniem raportów przy użyciu ERPNext. Byłem w stanie z łatwością opracować własne niestandardowe formaty drukowania, a te wskazówki ogromnie pomogły!
Tropicalrambler
10

Zaktualizowane, proste rozwiązanie

@media print {
   body {
       display: table;
       table-layout: fixed;
       padding-top: 2.5cm;
       padding-bottom: 2.5cm;
       height: auto;
   }
}

Stare rozwiązanie

Utwórz sekcję z każdą stroną i użyj poniższego kodu, aby dostosować marginesy, wysokość i szerokość.

Jeśli drukujesz w formacie A4.

Następnie użytkownik

Rozmiar: 8,27 cala i 11,69 cala

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
} 

następnie utwórz div z całą zawartością.

<div class="Section1"> 
    type your content here... 
</div>
Pir Abdul
źródło
To nie działa dla mnie w Chrome lub FF. Ponadto, class=Section1powinno być class="Section1".
nu everest
To jest prostsze rozwiązanie: stackoverflow.com/questions/37033766/ ...
besimple
9

Osobiście sugerowałbym użycie innej jednostki miary niż px. Nie sądzę, aby piksele miały duże znaczenie w druku; idealnie byś użył:

  • punkt (pt)
  • centymetr (cm)

Jestem pewien, że są inne, a jeden doskonały artykuł o print-css można znaleźć tutaj: Going to Print , autorstwa Erica Meyera .

David mówi, że przywróć Monikę
źródło
1
Masz rację, że pxnie ma to większego znaczenia w druku. Ale przeglądarki „tłumaczą” jednostki pikseli, więc wygląda to podobnie do tego, jak wygląda na ekranie. To ma nie korzystać z „kropki Rozdzielczość drukarki” jako pikseli (dzięki Bogu ...).
awe
1

Polecam również pt w porównaniu z cm lub mm, ponieważ jest bardziej precyzyjny. Nie mogę również uruchomić @page w Chrome (wersja 30.0.1599.69 m). Ignoruje wszystko, co wstawiam na marginesy, duże lub małe. Ale możesz sprawić, by działał z marginesami treści w dokumencie, dziwne.

ironarm
źródło
0

Jeśli znasz docelowy rozmiar papieru, możesz umieścić swoją treść w DIV o określonym rozmiarze i dodać margines do tego DIV, aby zasymulować margines wydruku. Niestety nie wydaje mi się, abyś miał dodatkową kontrolę nad funkcjami drukowania, poza pokazaniem tylko okna dialogowego drukowania.

jonjbar
źródło
Dzięki. Czy nie jest możliwe określenie pozostawienia x pikseli po lewej i prawej stronie, niezależnie od rozmiaru papieru. Pozdrawiam
kobra
1
Myślę, że może to być możliwe, jeśli ustawisz rozmiar swojego rodzica DIV na 100% i dodasz do niego margines pikseli ax.
jonjbar