Wie erstelle ich eine HTML-Seite in A4-Papierformaten?

388

Ist es möglich, dass sich eine HTML-Seite beispielsweise wie eine A4-Seite in MS Word verhält?

Im Wesentlichen möchte ich in der Lage sein, die HTML-Seite im Browser anzuzeigen und den Inhalt in den Abmessungen einer Seite im A4-Format zu skizzieren.

Der Einfachheit halber gehe ich davon aus, dass die HTML-Seite nur Text (keine Bilder usw.) enthält und beispielsweise keine <br>Tags vorhanden sind.

Wenn die HTML-Seite gedruckt wird, wird sie auch als Papierseite im A4-Format ausgegeben.

Zabba
quelle
1
Das echte "HTML für den Druck" ist comig! Alle Geschichte an stackoverflow.com/q/10641667/287948 und die W3C CSS Level 3 Fragmentierung Modul , das kommt!
Peter Krauss
Was war die Absicht, das zu tun? Verlassen Sie MS Office für Webtechnologien? Zumindest das, was ich versuche, aber ich brauche noch etwas Input wie . Eine Antwort darauf würde die Geschichte beenden, was mit dieser Frage begonnen wurde.
Stefan

Antworten:

318

Vor langer Zeit, im November 2005, veröffentlichte AlistApart.com einen Artikel darüber, wie ein Buch nur mit HTML und CSS veröffentlicht wurde. Siehe: http://alistapart.com/article/boom

Hier ist ein Auszug aus diesem Artikel:

CSS2 hat einen Begriff von ausgelagerten Medien (denken Sie an Papierblätter) im Gegensatz zu kontinuierlichen Medien (denken Sie an Bildlaufleisten). Stylesheets können die Größe von Seiten und deren Ränder festlegen. Seitenvorlagen können Namen gegeben werden, und Elemente können angeben, auf welcher benannten Seite sie gedruckt werden sollen. Außerdem können Elemente im Quelldokument Seitenumbrüche erzwingen. Hier ist ein Ausschnitt aus dem von uns verwendeten Stylesheet:

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

Mit einem in den USA ansässigen Verlag erhielten wir die Seitengröße in Zoll. Wir Europäer haben mit metrischen Messungen fortgefahren. CSS akzeptiert beides.

Nachdem wir die Seitengröße und den Seitenrand festgelegt hatten, mussten wir sicherstellen, dass an den richtigen Stellen Seitenumbrüche vorhanden sind. Der folgende Auszug zeigt, wie Seitenumbrüche nach Kapiteln und Anhängen generiert werden:

div.chapter, div.appendix {
    page-break-after: always;
}

Außerdem haben wir CSS2 verwendet, um benannte Seiten zu deklarieren:

div.titlepage {
  page: blank;
}

Das heißt, die Titelseite soll auf Seiten mit dem Namen "leer" gedruckt werden. CSS2 beschrieb das Konzept der benannten Seiten, aber ihr Wert wird erst sichtbar, wenn Kopf- und Fußzeilen verfügbar sind.

Wie auch immer…

Da Sie A4 drucken möchten, benötigen Sie natürlich verschiedene Abmessungen:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

Der Artikel befasst sich mit Dingen wie dem Setzen von Seitenumbrüchen usw., daher möchten Sie dies möglicherweise vollständig lesen.

In Ihrem Fall besteht der Trick darin, zuerst das Druck-CSS zu erstellen. Die meisten modernen Browser (> 2005) unterstützen das Zoomen und können bereits eine Website basierend auf dem gedruckten CSS anzeigen.

Jetzt möchten Sie das Web-Display etwas anders aussehen lassen und das gesamte Design an die meisten Browser anpassen (einschließlich der alten Browser vor 2005). Dazu müssen Sie eine Web-CSS-Datei erstellen oder einige Teile Ihres Druck-CSS überschreiben. Denken Sie beim Erstellen von CSS für die Webanzeige daran, dass ein Browser JEDE Größe haben kann (denken Sie an „mobil“ bis zu „Großbildfernsehern“). Bedeutung: Für das Web-CSS wird Ihre Seitenbreite und Bildbreite am besten mit einer variablen Breite (%) festgelegt, um so viele Anzeigegeräte und Webbrowser-Clients wie möglich zu unterstützen.

BEARBEITEN (26-02-2015)

Heute bin ich zufällig auf einen anderen, neueren Artikel bei SmashingMagazine gestoßen, der sich auch mit dem Entwerfen für den Druck mit HTML und CSS befasst… nur für den Fall, dass Sie noch ein weiteres Tutorial verwenden könnten.

BEARBEITEN (30-10-2018)

Ich wurde darauf aufmerksam gemacht, dass sizees sich nicht um gültiges CSS3 handelt, was in der Tat richtig ist. Ich habe lediglich den in dem Artikel zitierten Code wiederholt, der (wie erwähnt) gutes altes CSS2 war (was sinnvoll ist, wenn man sich das Jahr des Artikels und des Artikels ansieht Diese Antwort wurde erstmals veröffentlicht. Hier ist der gültige CSS3-Code für das Kopieren und Einfügen:

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

Wenn Sie der Meinung sind, dass Sie wirklich Pixel benötigen ( Sie sollten die Verwendung von Pixeln eigentlich vermeiden ), müssen Sie darauf achten, die richtige DPI für den Druck auszuwählen:

  • 72 dpi (Web) = 595 x 842 Pixel
  • 300 dpi (Druck) = 2480 x 3508 Pixel
  • 600 dpi (hochwertige Druckqualität) = 4960 x 7016 Pixel

Ich würde jedoch den Aufwand vermeiden und einfach cm(Zentimeter) oder mm(Millimeter) für die Größenbestimmung verwenden, da dadurch keine Störungen auftreten, die je nach verwendetem Client auftreten können.

E-Sushi
quelle
1
Vielen Dank, dass Sie diese Antwort aktualisiert haben, um den aktuellen Standards zu entsprechen!
jumps4fun
@ A.com Es gibt keinen px, da dies von DPI abhängen würde. Deshalb unterstützt CSS diese offensichtlichen Maßeinheiten namens cmet al. Ich rate Ihnen, die verlinkten Artikel und / oder zumindest meine Antwort zu lesen. Wenn Sie dies tun, werden Sie schnell feststellen, dass Ihre Frage tatsächlich keinen Sinn ergibt. Möglicherweise möchten Sie Ihre Frage auch als neue Frage veröffentlichen, wenn die Dinge noch unklar sind. Dies ist eine Q & A-Site, kein Forum. \ o /
E-Sushi
67

Es wäre ziemlich einfach, den Webbrowser zu zwingen, die Seite mit den gleichen Pixelabmessungen wie A4 anzuzeigen. Es kann jedoch einige Macken geben, wenn Dinge gerendert werden.

Angenommen, Ihre Monitore zeigen 72 dpi an, könnten Sie Folgendes hinzufügen:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>
Tim McNamara
quelle
19
Wenn Sie Will Deans Vorschlag (der sehr sinnvoll ist) mit Millimetern folgen, können Sie den Browser zwingen, die Pixelbreite / -höhe zu berechnen: body {height: 420mm; Breite: 297 mm; ...}
Tim McNamara
49
A4 ist tatsächlich 210x297 mm.
Fouronnes
8
Also, endlich ein Porträt DINA4:body { height:297mm; width:210mm; margin-left:auto; margin-right:auto; }
daVe
1
Wir haben jetzt einiges daran gearbeitet und obwohl die Abmessungen von 210 x 297 gut sind, sollten sie nicht als absolut passend für eine A4-Seite angesehen werden. Ein guter Test ist das Drucken-> PDF direkt aus Chrome und das Scrollen durch die Daumen der Vorschauseite. Selbst wenn keine Ränder festgelegt sind, muss die volle Höhe reduziert werden, um einen Überlauf zu vermeiden.> Dadurch werden alle geraden Seiten leer.
cbmtrx
36

A4 Größe ist 210x297mm

So können Sie die HTML-Seite so einstellen, dass sie mit CSS zu diesen Größen passt:

html,body{
    height:297mm;
    width:210mm;
}
zurfyx
quelle
Was ist, wenn wir dynamischen Inhalt haben, der 3-4 oder mehr Seiten umfassen kann?
Jazzbpn
24

Erstellen Sie mit jeder Seite einen Abschnitt und passen Sie mit dem folgenden Code Ränder, Höhe und Breite an.

Wenn Sie im Format A4 drucken.

Dann Benutzer

Size : 8.27in and 11.69 inches

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

Erstellen Sie dann ein Div mit all Ihren Inhalten.

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

oder

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}
Pir Abdul
quelle
Bist du sicher, dass es funktioniert? Ich konnte dies in den neuesten Versionen von Firefox und Chrome nicht reproduzieren.
Dan7
Ja, meistens mache ich Entwicklung für Chrom ... arbeite gut mit mir.
Pir Abdul
3
Ich kann nicht @page Section1mit Chrome 41.0.2272.77 arbeiten. Sind Sie wirklich sicher, dass Ihre Antwort funktioniert? Versuchen Sie zB data:text/html,<style>@page x{size:100pt 200pt}</style><div style="page:x">x</div>eine Druckvorschau zu besuchen und zu öffnen. Ich sehe keinen Unterschied zwischen dem und data:text/html,x. Wenn ich ersetzen @page xmit @page, dann funktioniert es, aber das ist kein seitenspezifische Selektor.
Rob W
Für diejenigen, die nicht daran gewöhnt sind, CSS in Dokumente einzufügen (wie ich zum Zeitpunkt des Schreibens), fügen Sie diesen Code in <style> </ style> -Tags ein und rufen dann das div auf (z. B. <div class = page> Stuff </ div > <div class = page> Mehr Zeug </ div>) wobei "Zeug" und "mehr Zeug" Inhalt sind, der auf einer einzelnen Seite enthalten sein soll.
mkingsbu
16

Ich habe HTML verwendet, um Berichte zu erstellen, die in echten Größen auf echtem Papier korrekt ausgedruckt werden.

Wenn Sie mm sorgfältig als Einheiten in der CSS-Datei verwenden, sollten Sie zumindest für einzelne Seiten in Ordnung sein. Die Leute können Sie jedoch vermasseln, indem sie den Druckzoom in ihrem Browser ändern.

Ich erinnere mich an alles, was ich tat, war eine einzelne Seite, also musste ich mir keine Sorgen um die Paginierung machen - das könnte viel schwieriger sein.

Will Dean
quelle
14

Ich habe diese Lösung gesehen, nachdem ich bei Google nach "A4 CSS-Seitenvorlage" (codepen.io) gesucht habe. Es zeigt einen Bereich im Format A4 (A3, A5, auch Hochformat) im Browser mit dem Tag <page>. Innerhalb dieses Tags wird der Inhalt angezeigt, aber die absolute Position bezieht sich immer noch auf den Browserbereich.

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}
<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

Dies funktioniert bei mir, ohne dass eine andere CSS / JS-Bibliothek enthalten sein muss. Funktioniert für aktuelle Browser (IE, FF, Chrome).

Cas Knook
quelle
Die Verwendung dieses Beispiels mit FF 53.0.3 und das Nacheinanderstellen von zwei Landschaftsseiten funktioniert nicht. Sieht in der normalen Ansicht gut aus, wird jedoch bei Auswahl von Druckvorschau auf 3 Seiten erweitert.
Lofihelsinki
Ich will keine alten Kühe aus dem Graben ziehen, aber ich glaube, Kastenschatten sollte sein box-shadow: none;und nicht 0
NoobishPro
Es funktioniert für mich und ich muss die Höhe ändern
Jomal Johny
Was ist, wenn wir dynamischen Inhalt haben, der 3-4 oder mehr Seiten umfassen kann?
Jazzbpn
11
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

In Ihrem normalen style.css:

table.tableclassname {
  width: 400px;
}

In Ihrem print.css:

table.tableclassname {
  width: 16 cm;
}
Jacob
quelle
10

PPI und DPI spielen absolut keine Rolle, wie ein Dokument in einem Browser gedruckt wird. Der Drucker nimmt keine Informationen über den Punktabstand des Bildschirms oder die DPI der Bilder usw. entgegen. Wenn Sie Bilder drucken, werden diese in einer Größe gedruckt, die im Verhältnis zur Anzeige auf dem Bildschirm ähnlich ist. Der Druckprozessor des Browsers würde den DPI-Wert der Bilder von 72 dpi auf den DPI-Wert des restlichen Dokuments erhöhen. Angenommen, das Bild wird eine halbe Seite breit angezeigt, dann ist es physisch ungefähr 4 Zoll breit. Die Pixelbreite des Bildes würde ca. 300 Pixel betragen, um im Browser korrekt angezeigt zu werden. Bis zum Drucken mit einem nominalen Wert von 300 DPI hat der Prozessor Pixel hinzugefügt und das Bild wächst auf ungefähr 1200px, was bei 300 DPI 4 "ist.

Wenn es um vektorielle oder nicht pixelbasierte Elemente wie Text geht, wählt der Drucker eine eigene DPI aus dem Treiber aus, die sich nicht auf den Bildschirmpunktabstand oder die Browserbreite usw. bezieht. Wenn der Browser 3000 Pixel breit ist, wird der Druckprozessor den entsprechenden Text umbrechen.

Hier ist, was es schwierig macht, Druckanzeigen zu erstellen: Jeder Browser und Drucker interpretiert Textgrößen (pt, em, px) und Abstände auf seine eigene Weise. Je nachdem, welchen Drucker, Browser und möglicherweise sogar welches Betriebssystem Sie verwenden, erhalten Sie eine unterschiedliche Anzahl von Zeilen und Zeichen pro Seite. Selbst wenn Sie auf Ihrem Computer mit Ihrem Browser und Drucker testen und herausfinden, dass Sie den Text in einer Box mit einer Größe von 640 x 900 Pixel anzeigen können und er beim Drucken perfekt ist, wird er möglicherweise beim Drucken beim nächsten Druckvorgang anders ausgeführt. Es gibt wirklich keine Möglichkeit, jeden Drucker und Browser zu zwingen, jedes Mal identisch zu werden.

Pixel vergessen und außerdem DPI vergessen. Das einzige, wofür Sie Pixel verwenden können, ist das Festlegen einer Tabellenbreite, die die Breite eines druckbaren Bereichs auf Ihrem Drucker simuliert. In diesem Fall fand ich, dass 640px breit nah ist.

Quintin Humphreys
quelle
Lesen Sie viele Seiten und alle deuten darauf hin, dass eine Erhöhung der DPI beim Drucken zu einer geringeren Größe führt (3000px / 300dpi = 10 Zoll). Beim Drucken mit meinem Chrome-Browser führen 600 DPI und 1200 DPI auf dem Papier zu genau der gleichen Größe. War wirklich verwirrt, bis ich das las!
Wang Sheng
10

Auf der Suche nach einem ähnlichen Problem habe ich dieses gefunden - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 ist ein Dokumentformat als Bildschirmbild, das von der Bildauflösung abhängt, z. B. ein A4-Dokument, dessen Größe geändert wurde auf:

  • 72 dpi (Web) = 595 x 842 Pixel
  • 300 dpi (Druck) = 2480 x 3508 Pixel (Dies ist "A4", wie ich es kenne, dh "210 mm x 297 mm bei 300 dpi")
  • 600 dpi (Druck) = 4960 x 7016 Pixel
Wojciech Bednarski
quelle
8

Ich weiß, dass dieses Thema ziemlich alt ist, aber ich möchte meine Erfahrungen zu diesem Thema teilen. Eigentlich habe ich nach einem Modul gesucht, das mir bei meinen täglichen Berichten helfen kann. Ich schreibe einige Dokumentationen und Berichte in HTML + CSS (anstelle von Word, Latex, OO, ...). Das Ziel wäre, sie auf A4-Papier zu drucken, um sie mit Freunden zu teilen, ... Anstatt zu suchen, entschied ich mich für eine kleine lustige Codierungssitzung, um eine einfache Bibliothek zu implementieren, die "Seiten", Seitenzahl, Zusammenfassung, Kopfzeile verarbeiten kann , Fußzeile, .... Schließlich habe ich es in ~~ 2h gemacht und ich weiß, dass das nicht das beste Werkzeug überhaupt ist, aber es ist fast in Ordnung für meinen Zweck. Sie können sich dieses Projekt auf meinem Repo ansehen und zögern Sie nicht, Ihre Ideen mitzuteilen. Es ist vielleicht nicht das, wonach Sie zu 100% suchen, aber ich denke, dass dieses Modul Ihnen helfen kann.

Grundsätzlich erstelle ich eine Seite mit der Breite "Breite: 200 mm". und Behälter mit einer Höhe von 290 mm (kleiner als A4). Dann habe ich Seitenumbruch nach verwendet: immer; Damit die Option "Drucken" des Browsers weiß, wann Seiten geteilt werden müssen.

Repo: https://github.com/kursion/jsprint

Yves Lange
quelle
6

Technisch gesehen könnten Sie das, aber es würde viel Arbeit kosten, alle Browser dazu zu bringen, die Seite genau so auszudrucken, wie sie auf dem Bildschirm angezeigt wird. Außerdem erzwingen die meisten Browser die URL, das Druckdatum und die Seitennummerierung auf dem Ausdruck, was nicht immer erwünscht ist. Dies kann nicht geändert oder deaktiviert werden.

Stattdessen würde ich empfehlen, ein PDF basierend auf dem Bildschirminhalt zu erstellen und das PDF zum Herunterladen und / oder Drucken bereitzustellen. Obwohl die meisten verfügbaren PDF-Bibliotheken kostenpflichtig sind, gibt es einige kostenlose Alternativen zum Erstellen grundlegender PDFs.

Prutswonder
quelle
5

Ich habe seit 1998 680px in kommerziellen Berichten zum Drucken auf A4-Seiten verwendet. Die 700px konnten je nach Größe der Ränder nicht richtig passen. Moderne Browser können die Seite verkleinern, um sie an die Seite des Druckers anzupassen. Wenn Sie jedoch 680 Pixel verwenden, drucken Sie in fast allen Browsern korrekt.

Das ist HTML für Sie. Führen Sie ein Code-Snippet aus und sehen Sie das Ergebnis:

window.print();
<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

JSFiddle:

https://jsfiddle.net/ajofmm7r/

lynx_74
quelle
Wie hoch ist eine ganze Seite in px?
Khaverim
4

Viele Möglichkeiten:

html,body{
    height:297mm;
    width:210mm;
}


html,body{
    height:29.7cm;
    width:21cm;
}

html,body{
    height: 842px;
    width: 595px;
}
Nalan Madheswaran
quelle
3

Es ist durchaus möglich, Ihr Layout so einzustellen, dass es die Proportionen einer a4-Seite annimmt. Sie müssten nur Breite und Höhe entsprechend einstellen (möglicherweise mit window.innerHeightund window.innerWidthobwohl ich nicht sicher bin, ob das zuverlässig ist).

Der schwierige Teil ist das Drucken von A4. Javascript unterstützt beispielsweise das rudimentäre Drucken von Seiten mit dieser window.printMethode nur. Wie @Prutswonder vorgeschlagen hat, ist das Erstellen eines PDF- Dokuments von der Webseite wahrscheinlich die raffinierteste Methode, um dies zu tun ( abgesehen von der Bereitstellung von PDF-Dokumentation an erster Stelle). Dies ist jedoch nicht so trivial, wie man denkt. Hier ist ein Link mit einer Beschreibung einer Open-Source-Java-Klasse zum Erstellen von PDFs aus HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

Sobald Sie ein PDF mit A4-Proportionen erstellt haben, wird Ihre Seite natürlich sauber gedruckt. Ob sich die Zeitinvestition lohnt, ist eine andere Frage.

FK82
quelle