Vraag Marge tijdens het afdrukken van html-pagina


Ik gebruik een aparte stijlpagina voor afdrukken. Is het mogelijk om de rechter- en linkermarge in te stellen in de stijlpagina die de afdrukmarge instelt (d.w.z. marge op papier).

Bedankt.


101
2017-10-09 07:26


oorsprong


antwoorden:


Je zou ... moeten gebruiken cm of mm als eenheid wanneer u opgeeft voor afdrukken. Het gebruik van pixels zorgt ervoor dat de browser het vertaalt naar iets dat lijkt op hoe het eruit ziet op het scherm. Gebruik makend van cm of mm zorgt voor een consistente grootte op het papier.

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

Gebruik voor lettergroottes pt voor de gedrukte media.

Merk op dat het instellen van de marge op het lichaam in css-stijl zal niet pas de marge aan in het printerstuurprogramma dat het afdrukgebied van de printer definieert, of een marge die wordt bestuurd door de browser (kan in sommige browsers instelbaar zijn in afdrukvoorbeeld) ... Het stelt alleen de marge in op het document binnen het afdrukbare gebied.

Je moet er ook rekening mee houden dat IE7 ++ automatisch de grootte aanpast die het best past, en zorgt ervoor dat alles verkeerd is, zelfs als je het gebruikt cm of mm. Om dit gedrag te overschrijven, moet de gebruiker 'Afdrukvoorbeeld' selecteren en vervolgens het afdrukformaat instellen op 100% (standaard is Shrink To Fit).

Een betere optie voor volledige controle over afgedrukte marges is het gebruik van de @page richtlijn om de papiermarge in te stellen, die de marge op papier buiten het html body-element, dat normaal door de browser wordt beheerd, beïnvloedt. Zien http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.
Dit werkt momenteel in alle belangrijke browsers behalve Safari.
 In Internet Explorer wordt de marge eigenlijk ingesteld op deze waarde in de instellingen voor deze afdruk en als u Voorbeeld doet, krijgt u dit als standaard, maar de gebruiker kan dit in het voorbeeld wijzigen.

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

Gerelateerd antwoord: Uitschakelen van browserafdrukopties (kopteksten, voetteksten, marges) van pagina?


182
2017-10-09 08:24



Ik zou persoonlijk voorstellen om een ​​andere meeteenheid te gebruiken dan px. Ik denk niet dat pixels veel relevantie hebben op het gebied van afdrukken; ideaal zou je gebruiken:

  • punt (pt)
  • centimeter (cm)

Ik weet zeker dat er anderen zijn, en een uitstekend artikel over print-css is hier te vinden: Naar afdrukken gaan, door Eric Meyer.


9
2017-10-09 08:02



Om te beginnen probeer ik al mijn gebruikers te dwingen Chrome te gebruiken tijdens het afdrukken, omdat andere browsers verschillende indelingen maken.

Een antwoord van deze vraag beveelt aan:

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

Uiteindelijk heb ik deze CSS echter wel gebruikt voor al mijn pagina's die moeten worden afgedrukt:

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



Speciaal geval: lange tafels

Wanneer ik een tabel over meerdere pagina's moest afdrukken, de margin:0 met de @page leidde tot bloedende randen:

bleeding edges

Ik zou dit kunnen bedanken dankzij dit antwoord met:

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 de boven-onder-marges instellen voor @page:

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

Resultaat:

solved bleeding edges

Ik zou liever een oplossing willen die beknopt is en met alle browsers werkt. Voorlopig hoop ik dat de bovenstaande informatie sommige ontwikkelaars met vergelijkbare problemen kan helpen.


9
2018-01-14 16:38



Bijgewerkte, eenvoudige oplossing

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

Oude oplossing

Maak een sectie met elke pagina en gebruik de onderstaande code om marges, hoogte en breedte aan te passen.

Als u A4-formaat afdrukt.

Dan gebruiker

Afmetingen: 8,27 inch en 11,69 inch

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

maak dan een div met al uw inhoud erin.

<div class="Section1"> 
    type your content here... 
</div>

6
2018-01-31 08:26



Ik adviseer ook pt versus cm of mm omdat het nauwkeuriger is. Ook kan ik @page niet laten werken in Chrome (versie 30.0.1599.69 m). Het negeert alles wat ik voor de marges, groot of klein, stop. Maar je kunt het laten werken met de lichaamsmarges op het document, raar.


1
2017-10-09 20:09



Als u het doelpapierformaat kent, kunt u uw inhoud in een DIV met die specifieke grootte plaatsen en een marge toevoegen aan die DIV om de afdrukmarge te simuleren. Helaas geloof ik niet dat u extra controle over de afdrukfunctionaliteit hebt, behalve dat u alleen het afdrukdialoogvenster laat zien.


0
2017-10-09 07:41