it-swarm.com.de

Wie erstelle ich eine HTML-Seite im A4-Format?

Ist es möglich, eine HTML-Seite so zu gestalten, dass sie sich 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 A4-Seite zu skizzieren.

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

Wenn die HTML-Seite gedruckt wird, werden sie auch als A4-Papierseiten ausgegeben.

345
Zabba

Vor einigen Jahren, 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 eine Vorstellung von Seitenmedien (Think Sheet of Paper) im Gegensatz zu Endlosmedien (Think Scrollbars). Stylesheets können die Seitengröße und deren Ränder festlegen. Seitenvorlagen können mit Namen versehen 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 Stylesheet, das wir verwendet haben:

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

Bei einem Verlag mit Sitz in den USA wurde die Seitengröße in Zoll angegeben. Als Europäer fuhren wir mit metrischen Messungen fort. CSS akzeptiert beides.

Nach dem Einstellen der Seitengröße und des Seitenrands mussten wir sicherstellen, dass sich an den richtigen Stellen Seitenumbrüche befinden. 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 hat das Konzept der benannten Seiten beschrieben, aber ihr Wert wird erst sichtbar, wenn Kopf- und Fußzeilen verfügbar sind.

Sowieso…

Da Sie A4 drucken möchten, benötigen Sie natürlich unterschiedliche 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 dem Einstellen von Seitenumbrüchen usw., sodass Sie dies möglicherweise vollständig lesen möchten.

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 anzeigen, die auf dem Print-CSS basiert.

Jetzt möchten Sie die Webanzeige ein wenig anders gestalten 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 Webdarstellung daran, dass ein Browser JEDE Größe haben kann (denken Sie an „mobile“ bis hin zu „Großbildfernsehern“). Das heißt: Für das Web-CSS wird die Seitenbreite und Bildbreite am besten mit einer variablen Breite (%) festgelegt, um so viele Anzeigegeräte und Webbrowser-Clients wie möglich zu unterstützen.

EDIT (26-02-2015)

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

EDIT (30-10-2018)

Ich wurde darauf aufmerksam gemacht, dass size kein gültiges CSS3 ist, 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 beim Betrachten Sinn macht) das Jahr, in dem der Artikel und diese Antwort erstmals veröffentlicht wurden). Hier ist der gültige CSS3-Code, der Ihnen das Kopieren und Einfügen erleichtert:

@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 (, sollten Sie eigentlich die Verwendung von Pixeln vermeiden, müssen Sie die richtige DPI für den Druck auswählen:

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

Dennoch würde ich den Aufwand vermeiden und einfach cm (Zentimeter) oder mm (Millimeter) für die Größenanpassung verwenden, da so vermieden wird, dass Störungen auftreten, die je nach verwendetem Client auftreten können.

278
e-sushi

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 haben eine Auflösung von 72 dpi, können 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>
64
Tim McNamara

Das A4-Format ist 210 x 297 mm

So können Sie die HTML-Seite mit CSS an diese Größen anpassen:

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

Erstellen Sie mit jeder Seite einen Abschnitt, und verwenden Sie den folgenden Code, um Ränder, Höhe und Breite anzupassen.

Wenn Sie im A4-Format 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;
} 

dann erstelle ein Div mit all deinen 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;
}
21
Pir Abdul

Ich habe HTML verwendet, um Berichte zu erstellen, die in Originalgröße auf Originalpapier korrekt ausgedruckt werden.

Wenn Sie mm in der CSS-Datei mit Bedacht als Maßeinheit verwenden, sollten Sie zumindest für einzelne Seiten in Ordnung sein. Die Leute können Sie durch Ändern des Druck-Zooms in ihrem Browser vermasseln.

Ich erinnere mich offenbar, dass alles, was ich tat, eine einzelne Seite war, sodass ich mir keine Gedanken über die Paginierung machen musste - das könnte viel schwieriger sein.

16
Will Dean
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

In deinem normalen style.css:

table.tableclassname {
  width: 400px;
}

In deinem print.css:

table.tableclassname {
  width: 16 cm;
}
12
Jacob

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, da ein Bildschirmbild von der Bildauflösung abhängt, z. B. ein A4-Dokument, dessen Größe folgendermaßen geändert wird:

  • 72 dpi (Web) = 595 x 842 Pixel
  • 300 dpi (Druck) = 2480 x 3508 Pixel (dies ist "A4", wie ich es kenne, d. H. "210 mm x 297 mm bei 300 dpi")
  • 600 dpi (Druck) = 4960 x 7016 Pixel
10

PPI und DPI haben keinerlei Einfluss darauf, wie ein Dokument in einem Browser gedruckt wird. Der Drucker nimmt keine Informationen zur Rasterweite oder zum DPI-Wert der Bilder usw. an. Wenn Sie Bilder drucken, werden diese mit einer Größe gedruckt, die im Verhältnis zu der auf dem Bildschirm angezeigten Größe ähnlich ist. Der Druckprozessor des Browsers würde die DPI der Bilder von etwas ziemlich Niedrigem wie 72 dpi auf die DPI des restlichen Dokuments erhöhen. Angenommen, das Bild ist eine halbe Seite breit, dann ist es physikalisch ungefähr 4 Zoll breit. Die Pixelbreite des Bildes würde ungefähr 300px betragen, um im Browser korrekt angezeigt zu werden. Zu dem Zeitpunkt, an dem es mit nominal 300 dpi gedruckt wird, hat der Prozessor Pixel hinzugefügt und das Bild wird auf ungefähr 1200px anwachsen, was bei 300 DPI 4 "ist.

wenn es sich um vektorbasierte oder nicht auf Pixeln basierende Elemente wie Text handelt, wählt der Drucker seine eigene DPI aus dem Treiber, die sich nicht auf den Rasterpunktabstand oder die Browserbreite usw. bezieht. Wenn der Browser 3000 Pixel breit ist, bricht der Druckprozessor den Text entsprechend um.

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. Abhängig davon, welchen Drucker, welchen Browser und 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 einem Feld mit einer Auflösung von 640 x 900 Pixel und einer perfekten Druckqualität anzeigen können, wird der nächste, der versucht zu drucken, ihn möglicherweise anders drucken. Es gibt wirklich keine Möglichkeit, jeden Drucker und Browser dazu zu zwingen, ihn jedes Mal identisch zu machen.

vergessen Sie Pixel und vergessen Sie auch DPI. Das einzige, wofür Sie Pixel verwenden können, ist die Einstellung einer Tabellenbreite, die die Breite eines bedruckbaren Bereichs auf Ihrem Drucker simuliert. In diesem Fall fand ich, dass 640px breit in der Nähe ist.

10

Ich sah diese Lösung nach der Suche bei Google, Suche nach "A4 CSS-Seitenvorlage" (codepen.io). Mit dem Tag <page> wird im Browser ein Bereich im Format A4 (A3, A5, auch Hochformat) angezeigt. Innerhalb dieses Tags wird der Inhalt angezeigt, aber die absolute Position ist immer noch in Bezug 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 eingebunden werden muss. Funktioniert mit aktuellen Browsern (IE, FF, Chrome).

9
Cas Knook

Ich weiß, dass dieses Thema ziemlich alt ist, aber ich möchte meine Erfahrungen zu diesem Thema teilen. Eigentlich habe ich ein Modul gesucht, das mir bei meinen täglichen Berichten helfen kann. Ich schreibe einige Dokumentationen und einige Berichte in HTML + CSS (anstelle von Word, Latex, OO, ...). Das Ziel wäre es, sie auf A4-Papier zu drucken, um sie mit Freunden zu teilen , footer, .... Endlich habe ich es in ~~ 2h gemacht und ich weiß, dass es nicht das beste Tool überhaupt ist, aber für meinen Zweck ist es fast in Ordnung. Sie können sich dieses Projekt auf meinem Repo ansehen und zögern nicht, Ihre Ideen mitzuteilen. Es ist vielleicht nicht das, wonach Sie bei 100% suchen, aber ich denke, dass dieses Modul Ihnen helfen kann.

Grundsätzlich erstelle ich eine Körperseite "Breite: 200mm;" und Behälter mit einer Höhe von 290 mm (kleiner als A4). Dann habe ich page-break-after verwendet: always; So weiß die Option "Drucken" des Browsers, wann Seiten aufgeteilt werden sollen.

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

8
Yves Lange

Technisch könnte man das, aber es würde eine Menge Arbeit erfordern, 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 den Inhalten auf dem Bildschirm 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 zur Erstellung grundlegender PDFs.

6
Prutswonder

Ich habe seit 1998 680px in kommerziellen Berichten verwendet, um auf A4-Seiten zu drucken. Moderne Browser können Seiten verkleinern, um sie an den Drucker anzupassen. Wenn Sie jedoch 680 Pixel verwenden, können Sie in fast allen Browsern korrekt drucken.

Das ist HTML für Sie Führen Sie das 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/

5
lynx_74

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 (überprüfen Sie möglicherweise mit window.innerHeight und window.innerWidth, obwohl ich nicht sicher bin, ob das zuverlässig ist).

Der knifflige Teil ist das Drucken von A4. Beispielsweise unterstützt Javascript das Drucken von Seiten nur rudimentär mit der window.print -Methode. Da @Prutswonder vorgeschlagen hat, ein PDF von der Webseite aus zu erstellen, ist dies wahrscheinlich die ausgefeilteste Methode (außer die Angabe von PDF Dokumentation an erster Stelle). Dies ist jedoch nicht so trivial, wie man denkt. Hier ist ein Link, der eine Beschreibung einer Open-Source-Klasse Java zum Erstellen von PDFs aus HTML enthält: http://www.javaworld.com/javaworld/jw-04-2006/jw- 0410-html.html .

Wenn Sie ein PDF mit A4-Proportionen erstellt haben, wird Ihre Seite natürlich im A4-Format gedruckt. Ob sich die Investition lohnt, ist eine andere Frage.

3
FK82

Viele Möglichkeiten:

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


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

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