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

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.

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.

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>

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

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

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.

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).

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

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.

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

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

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.

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/

Viele Möglichkeiten:

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


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

html,body{
    height: 842px;
    width: 595px;
}

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.