1. Zuhause
  2. Frage und Antwort
  3. Wie können Sie eine Webseite an den Drucker anders senden als im Browserfenster?

Wie können Sie eine Webseite an den Drucker anders senden als im Browserfenster?

2008-09-17 6 views
11

Google Maps verwendet, um dieses Bit, wo, wenn Sie den "Drucken" -Link drücken, was an den Drucker gesendet würde, war nicht genau das, was Sie auf dem Bildschirm hatten, sondern eine anders formatierte Version von meist die gleiche Information.Wie können Sie eine Webseite an den Drucker anders senden als im Browserfenster?

Es scheint, dass sie von diesem Konzept weitgehend verschoben haben weg (ich Menschen denke, es nicht verstanden haben) und die meisten Websites haben eine „Druckversion“ von Dingen wie Artikel und so weiter.

Wenn Sie jedoch eine Webseite so erstellen möchten, dass eine "druckerfreundliche" Version der Seite an den Drucker gesendet wird, ohne dafür eine eigene Seite erstellen zu müssen, wie würden Sie das tun?

Follow-up: Können Sie Dinge drucken lassen, die nicht auf der Seite gerendert werden? (d. h. vor der Wiedergabe verborgen)

Quelle

2008-09-17 Tom Kidd

Antwort

22

Ja, Sie können einen Drucker CSS anwenden. Es gibt einen guten Artikel darüber here.

Quelle

2008-09-17 16:28:56

2

Sie können dies mit dem CSS tun, wenn Sie Medien als Druck angeben.

Quelle

2008-09-17 16:28:20

1

Verwenden Sie eine print stylesheet.

Bearbeiten: In Bezug auf die Follow-up, können Sie im Allgemeinen Dinge auf einer Seite mit CSS hinzufügen.

Eine Option besteht darin, Ihren Nur-Druck-Inhalt in die Seite aufzunehmen und ihn für Bildschirm-Stylesheets auszublenden. Sie sollten jedoch sicherstellen, dass die Seite auch ohne CSS Sinn macht.

Eine weitere Option ist die Verwendung von generierten Inhalten. Dies wird jedoch von Internet Explorer 7 und darunter nicht unterstützt und kann sehr begrenzt sein.

Wenn es sich bei dem Nur-Druck-Inhalt um ein Bild handelt, können Sie das Bild mit einer der gängigen Bildwiedergabemethoden austauschen.

Quelle

2008-09-17 16:29:20 Jim

1

Ein anderer Weg, falls gewünscht, ist die Schaltfläche ‚Drucken‘ auf der Seite die Seite ändern in irgendeiner Weise haben, dass Sie sich entscheiden, dann eine Javascript ausführen ‚window.print();‘ um den Druckdialog des Browsers aufzurufen.

Quelle

2008-09-17 16:30:26 nsayer

0

Der einfachste Weg ist die Verwendung von CSS-Medientypen. Für jede CSS-Datei, die Sie einschließen, können Sie angeben, wo sie verwendet werden soll: auf dem Bildschirm, beim Drucken, für Handhelds, für Screenreader oder verschiedene Kombinationen davon.

Beispiel: < link rel = "stylesheet" type = "text/css" media = "print, Handheld" href = "foo.css" >

Dies ist seit CSS2 ein Standard gewesen, und Die meisten Browser unterstützen es jetzt. Weitere Informationen finden Sie hier: http://www.w3.org/TR/CSS2/media.html

Quelle

2008-09-17 16:30:43

7

Sie können diesen Effekt erzielen, indem Sie ein CSS-Stylesheet erstellen, das direkt auf das Drucken ausgerichtet ist, und ein anderes, das direkt auf den Bildschirm ausgerichtet ist.

den Link-Tag:

<link rel="stylesheet" type="text/css" href="print.css" media="print, handheld" /> 
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />

Ihr Stylesheet in Ihr Dokument einbetten.

Um zu verstecken ist einfach, stellen Sie einfach Ihre Block-Stil versteckt in jedem gewünschten Stylesheet und es wird nicht angezeigt. Zum Beispiel:

.newStyle1 { 
    display: none; 
}

Dann alles auf den Stil der newStyle1 gesetzt, werden nicht angezeigt.

Quelle

2008-09-17 16:31:15 skamradt

1

Es gibt mehrere Optionen für Sie da:

  • Sie können mit leicht unterschiedlichen Daten ein neues Fenster öffnen, um zu gedruckt werden.
  • Es gibt auch CSS-Stile, mit denen Sie das Seitenlayout ändern können.
  • Schließlich können Sie komplett unterschiedliche Stylesheets für Bildschirm, Printmedien, Braille-Leser angeben usw.

z.B. <link href="css/print.css" type="text/css" rel="stylesheet" media="print" />

Siehe auch CSS2 Print Reference

Quelle

2008-09-17 16:31:47

0

CSS können Sie Stylesheets für bestimmte Arten von Medien zu schaffen, was bedeutet, dass Sie ein Stylesheet haben kann, die nur gilt, wenn Sie eine Seite drucken, so dass Sie es verursachen formatiert werden anders.

Fügen Sie einfach ein media = "print" -Attribut auf Ihrem Stylesheet-Link für dieses Stylesheet ein.

Diese A List Apart article scheint zu dem Thema ziemlich gut zu sein.

Quelle

2008-09-17 16:33:07 SpoonMeiser

0

Ich habe versucht, verschiedene Stylesheets basierend auf den Medien zu verwenden, aber ich bekam Schwierigkeiten, alle Optionen zu bekommen, die ich brauchte. Seitdem umleite ich normalerweise zu einem anderen Eingang unseres (Fusebox) Frameworks (dh print.php statt von index.php), die im Wesentlichen die gleiche Datei ist, außer dass sie ein zusätzliches Flag/Konstante setzt.

In der XSL-Datei mit der Seite assoziiert ich zusätzliche Arbeit dann tun auf der Grundlage dieses Flag/konstant wie das Menü Weglassen, Spalten einer Tabelle usw.

dh (Seite zeigt einen Link, dass der Benutzer muss klicken Sie auf das Kennwort auf dem Bildschirm angezeigt werden soll. die Druckversion des Passworts gedruckt hat.)

if (!BOOL_PRINT) 
    echo "<TD class=\"tbl_teams_scroll_item\"><SPAN class=\"span_password_hidden\" id=\"span_password_{\$team_id}\" onClick=\"RevealPassword('{\$team_id}','{\$password}');\"><xsl:value-of select=\"/PAGE/TEXTS/HIDDEN\" /></SPAN></TD>\n"; 
else 
    echo "TD class=\"tbl_teams_scroll_item\"><xsl:value-of select=\"PASSWORD\" /></TD>\n";

Quelle

2008-09-17 16:33:45 Twan

+0

Ist das nicht ein Haufen Code duplizieren? – JBRWilkinson

+0

Das obige Beispiel ist etwas vereinfacht. In der Realität würden Sie das Beispiel SPAN in eine Überprüfung für den booleschen Wert einbinden, um doppelten Code in Form einer if/else-Anweisung zu vermeiden. Am Ende vermeidet der gesunde Menschenverstand hier mehr Probleme als die Methodik. – Twan

2

die @media Regel in CSS verwendet werden, können alternative Regeln für print.This zu definieren, oft Navigation verstecken wird verwendet, und ändern Sie die Stil, um besser zu drucken:

@media print { 
    .sidebar { display: none; } 
}

Sie können auch ein separates Stylesheet für den Druck verlinken:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Quelle

2008-09-17 16:36:13 JacquesB

0

Sie können CSS-Regeln definieren, die einem Medientyp spezifisch sind. Das Folgende ist ein CSS-Beispiel (kopiert von http://www.w3.org/TR/CSS2/media.html, Abschnitt 7.2.1), das verschiedene Schriftgrößen angibt, was auf einer Webseite angezeigt wird und was gedruckt wird.

@media print { 
    BODY { font-size: 10pt } 
    } 
    @media screen { 
    BODY { font-size: 12pt } 
    } 
    @media screen, print { 
    BODY { line-height: 1.2 } 
    }

Alternativ können Sie angeben, welche Medien ein Stylesheet angewendet werden sollte, wenn es auf einer Seite mit:

<link href="webstyles.css" type="text/css" rel="stylesheet" media="screen"/> 
<link href="printstyles.css" type="text/css" rel="stylesheet" media="print"/> 
<link href="commonstyles.css" type="text/css" rel="stylesheet" media="screen,print"/>

Quelle

2008-09-17 16:36:28 dave

0

Noch eine weitere Option, um einen versteckten IFRAME haben, ist, dass Sie iframe.contentWindow nennen. Drucken() an. Dadurch können Sie ein unsichtbares Layout erstellen, das genau so druckt, wie Sie es möchten.

Natürlich ist eine noch bessere Lösung, die Datei in eine PDF zu exportieren und den Benutzer auf diese Weise auszudrucken. PDFs produzieren die höchste Ausgabequalität. Allerdings ist es noch ein Reifen für den Benutzer durch springen, so die Faustregel:

  • PDFs, wenn das Drucklayout zählt
  • HTML für, wenn der reinen Text ist wichtiger als das Layout

Quelle

2008-09-17 16:37:39 64BitBob

0

nsayer erwähnt einen Druckknopf das Layout des Bildschirms ändern zu müssen und dann ab window.print()

ein kicking Dies ist eine Lösung, die wahrscheinlich durch eine Menge Leute wurden übersehen werden und sollte in Betracht gezogen werden wHE n Sie denken, dass Ihre Benutzer ein wenig mehr von einem WYSIWYG wollen. Es sollte jedoch ein "druckerfreundlicher" Link sein, der den Medientyp Ihrer Blattblätter ändert, anstatt "dieses zu drucken".

mit JQuery, könnte man so etwas tun (nicht geprüft):

$(document).ready(function(){ 
    $("#printFriendly").click(function(){ 
     $(link[rel=link][media=screen]).remove(); 
     $(link[rel=link][media=print]).attr("media","screen"); 
    }); 
});

Quelle

2008-09-17 20:09:45

0

Alles, was Sie mit CSS tun können, können Sie in einem Drucksheet tun. Dies bedeutet, dass Sie Inhalte in der Druckversion, die in der Bildschirmversion angezeigt wird, verbergen oder Inhalte in der Bildschirmversion ausblenden können, die beim Drucken angezeigt werden sollen. Sie können display: none nur auf die entsprechenden Abschnitte im entsprechenden Stylesheet anwenden.

Auch ist es eine gute Idee, Ihren Text in Punkten für die Druckversion (das ist eine schlechte Idee für die Bildschirmversion - bleiben Sie hier auf Pixel, ems oder Prozentsätze). Es besteht eine universelle Übereinstimmung darüber, welche gedruckten Punktgrößen verwendet werden, da Abbildungen von Pixel zu Punkten mit unterschiedlichen Auflösungsvorrichtungen variieren.

Quelle

2008-09-25 17:48:35 domgblackwell

 Verwandte Themen

  • Keine verwandten Themen^_^