Wie kann man dafür sorgen, dass eine Webseite etwas anderes an den Drucker sendet als das, was im Browserfenster angezeigt wird?

StackOverflow https://stackoverflow.com/questions/85019

  •  01-07-2019
  •  | 
  •  

Frage

Früher hat Google Maps diesen Teil übernommen, bei dem beim Klicken auf den Link „Drucken“ nicht genau das, was Sie auf dem Bildschirm sahen, an den Drucker gesendet wurde, sondern eine anders formatierte Version der größtenteils gleichen Informationen.

Es scheint, dass sie sich weitgehend von diesem Konzept entfernt haben (ich vermute, dass die Leute es nicht verstanden haben) und die meisten Websites eine „gedruckte Version“ von Dingen wie Artikeln usw. haben.

Aber wenn Sie eine Webseite so erstellen möchten, dass eine „druckerfreundliche“ Version der Seite an den Drucker gesendet wird, ohne dass dafür eine separate Seite erstellt werden muss, wie würden Sie das tun?

Nachverfolgen:Kann man Dinge drucken lassen, die nicht auf der Seite wiedergegeben werden?(d. h. vor dem aktuellen Rendern verborgen)?

War es hilfreich?

Lösung

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

Andere Tipps

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

Verwenden Sie 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" />

um Ihr Stylesheet in Ihr Dokument einzubetten.

Das Ausblenden ist ganz einfach. Stellen Sie einfach Ihren Blockstil in dem gewünschten Stylesheet auf „Ausgeblendet“ und er wird nicht angezeigt.Zum Beispiel:

.newStyle1 {
    display: none;
}

Dann wird alles auf den Stil eingestellt newStyle1 wird nicht angezeigt.

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

Die @media Regel in CSS verwendet werden, können alternative Regeln für print.This zu definieren, oft Navigation verstecken verwendet wird und den Stil Druck zu passen besser: 

@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" />

Eine andere Möglichkeit, wenn gewünscht, ist die Schaltfläche ‚Drucken‘ auf der Seite haben, um die Seite in irgendeiner Art und Weise ändern, die Sie sich entscheiden, führen Sie dann eine Javascript ‚window.print ();‘ Browser des Druckdialog zu öffnen.

Es gibt mehrere Möglichkeiten, die Ihnen:

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

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

Siehe auch CSS2 Drucken Referenz

Verwenden Sie einen drucken Sheet rel="nofollow.

Edit:. die Followup Bezug, können Sie in der Regel nicht, fügen Sie die Dinge auf einer Seite mit CSS

Eine Möglichkeit ist, Ihren Druck nur Inhalte auf der Seite zu schließen, und versteckt es für Bildschirm-Stylesheets. Sie sollten sicherstellen, dass die Seite noch Sinn allerdings ohne CSS macht.

Eine weitere Option ist generierte Inhalte zu verwenden, aber dies wird nicht von Internet Explorer 7 und unten unterstützt, und kann sehr begrenzt sein.

Wenn der Druck-only Inhalt ein Bild ist, können Sie, dass eine der beliebtesten Bildersetzung Techniken auslagern.

Der einfachste Weg ist CSS-Medientypen zu verwenden. Für jede CSS-Datei Sie gehören, können Sie angeben, wo es sollte verwendet werden. Auf dem Bildschirm, beim Drucken, für Handhelds, für Bildschirm-Lesegeräte, oder verschiedene Kombinationen davon

Beispiel:

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

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 unterschiedlich formatiert werden.

ist einfach ein media = "print" -Attribut auf Ihrem Stylesheet Link für das Stylesheet.

Die A List Apart Artikel scheint zu diesem Thema recht gut zu sein.

Ich habe versucht, Blätter anderen Stil basierend auf den Medien, aber ich lief in Schwierigkeiten, alle Optionen immer ich brauchte in. Seitdem ich in der Regel auf einen anderen Eingang unseres (Fusebox) Rahmen (dh print.php anstelle Umleitung von index.php), die im Wesentlichen die gleiche Datei, außer es ein zusätzliches Flag / constant setzt.

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

d. (Seite zeigt einen Link, den der Benutzer klicken muss das Passwort auf dem Bildschirm angezeigt werden soll. Die Druckversion des Passworts hat gedruckt.) 

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

Sie können CSS-Regeln definieren, die einen Medientyp spezifisch sind. Im Folgenden ist ein Beispiel CSS (kopiert von http://www.w3.org/TR /CSS2/media.html , Abschnitt 7.2.1), die verschiedenen Schriftarten gibt Größen, 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 angewandt werden soll, 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"/>

Eine weitere Option ist eine versteckte IFRAME haben, die Sie anrufen iframe.contentWindow.print () auf. Das ermöglicht es Ihnen, eine unsichtbare Layout zu erstellen, die genau druckt, wie Sie es wollen.

Natürlich eine noch bessere Lösung ist die Datei in ein PDF zu exportieren und damit der Benutzer es auf diese Weise ausdrucken. PDFs erzeugen die höchste Druckqualität, period. Es ist jedoch noch ein Reifen für den Benutzer durch springen, so die Faustregel:

  • PDFs, wenn die Druck-Layout-Angelegenheiten
  • HTML für, wenn der reine Text ist wichtiger als das Layout

Alles, was Sie mit CSS tun können Sie in einem Druck-Stylesheet tun. Dies bedeutet, dass Sie Inhalt in der Druckversion verstecken kann, die in der Bildschirm-Version oder verbergen Inhalt auf dem Bildschirm-Version, die Sie zeigen möchten, bis angezeigt wird, wenn printing.All Sie tun, ist Anzeige gelten: keine auf die entsprechenden Abschnitte in dem entsprechenden Sheet.

Auch ist es eine gute Idee zu groß ist Ihr Text in Punkten für die Druckversion (das ist eine schlecht Idee für die Bildschirm-Version - halten Sie sich an Pixeln, ems oder Prozentsatz hier). Es gibt allgemeine Übereinstimmung darüber, was gedruckt Punktgrößen sind, wo als Abbildungen von Pixeln, um Punkte mit unterschiedlicher Auflösung Geräten variieren.

Hier ist ein weiterer Link von A List Apart in Bezug auf Druck CSS genannt ein Buch mit CSS Druck: Boom! http://www.alistapart.com/articles/boom/

nsayer ein Druckknopf das Layout des Bildschirms ändern erwähnt haben und treten aus und dann eine window.print()

Dies ist eine Lösung, die wahrscheinlich durch eine Menge Leute wurden übersehen werden und sollte in Betracht gezogen werden, wenn Sie Ihre Mitglieder halten ein wenig mehr von einem WYSIWYG wollen. Es soll wohl ein „Drucker“ Link sein aber, dass der Medientyp Ihres Blatt Blätter ändert, anstatt „druckt diese“.

Mit jQuery, man könnte 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");
    });
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top