Ich habe eine Website, die ich gerade entwickle, und der Kunde hat eine ganz besondere Anfrage. Sie möchten, dass der Benutzer eine Schaltfläche drücken und den Inhalt des Browserfensters drucken kann. Ich wollte wissen, ob jemand ähnliche Funktionalität implementiert hat oder irgendeine Strategie kennt, um so etwas zu entwickeln, da ich nicht den ersten Hinweis habe.
Beispiel: Ich habe 30 Bilder auf einer Seite, aber nur 4 passen in den sichtbaren Bereich oder das Browserfenster. Ich möchte nur den genauen Inhalt des Browserfensters / der Elemente, die sichtbar sind, ausdrucken.
Vielen Dank im Voraus,
JN
Diese Methode erfordert jQuery, kann aber möglicherweise in einfachem Javascript umgeschrieben werden.
Mit einer Bookmarklet-App von mir fand ich, dass das Popup-Fenster die zuverlässigste Möglichkeit war, dynamischen Inhalt zu drucken, und dass der Benutzer den Inhalt vor dem Drucken sehen konnte. Ich fand auch, dass das Reduzieren der Schriftgröße erlaubte, den ganzen Inhalt auf der Seite zu passen, während sie lesbar ist. Sie könnten auch versuchen, die Bilder zu schrumpfen, wenn das eine Option ist. Ich hatte versucht, Medientypen mit CSS und einigen jQuery-Print-Plugins anzusprechen, fand sie aber bestenfalls unzuverlässig.
Hier ist die Funktion, die ich verwende, um ein jQuery-Objekt zum Drucken zu übergeben. Ich maximierte das Fenster auf Öffnen und änderte den Titel / die Schriftgröße. Wenn Sie mehr als nur Bilder haben, müssen Sie auch Ihr CSS klonen, meines wurde zufällig in einer Variable vom Bookmarklet geladen.
%Vor%Verwenden Sie die Funktion isScrolledIntoView aus dieser Frage: Überprüfen Sie, ob das Element sichtbar ist Nach dem Scrollen könnte etwas wie der obige Code mit etwas Feinabstimmung funktionieren. Rufen Sie printVisibleImages () auf, Sie müssen möglicherweise CSS zum Auffüllen hinzufügen oder die Stylesheets von der Hauptseite übergeben.
Sie könnten - im selben oder in einem neuen Fenster - einen DIV um den gesamten BODY-Inhalt wickeln und den Anzeigebereich auf aktuell sichtbar beschränken. Wenn es zum Beispiel einen Root-Container-DIV gibt ...
%Vor%... es kann leicht mit jQuery gemacht werden:
%Vor%Sollte zu einem Dokument führen, das nichts anderes als das zeigt, was vorher sichtbar war. Der Ausdruck sollte genauso aussehen wie ein Screenshot - mit Bildern, die am besten abgeschnitten werden.
Erstellen Sie eine jQuery-Funktion, die beim Klicken einer Schaltfläche über Ajax eine Seite lädt. (Senden des Seitennamens als Post-Parameter). Auf dieser Seite tun Sie Folgendes:
%Vor%und du style entsprechend.
Vielleicht können Sie mit Javascript experimentieren (sehen Sie sich Fenstergrößen und Bildlaufpositionen an ) , aber ich weiß nicht, wie ich nur diesen Teil des Dokuments drucken soll ...
Vielleicht kann Ihnen das helfen: Schnappschuss vom Browser mit Flash oder Javascript
Ich habe 30 Bilder auf einer Seite, aber nur 4 passen in den sichtbaren Bereich oder Browserfenster.
Ich glaube nicht, dass Sie mit Sicherheit sagen können, dass das Obige in allen Situationen funktioniert.
Es ist durchaus möglich, dass viele andere Browser / Auflösungen verschiedene Konfigurationen erzeugen, darunter auch solche, in denen die Bilder abgeschnitten sind, usw.
Die bessere Lösung, denke ich, besteht darin, X Anzahl der Bilder pro gedruckter Seite anzubieten und entsprechend zu gestalten.
Eine der Web-Apps benötigt etwas, das dem entspricht, was Sie verlangen. Es ist ein FAQ-Link, der eine FAQ-Seite erstellt hat und der Benutzer wollte, dass er sie ausdrucken kann, wenn er dies wünscht.
Ich tat dies, indem ich einfach eine Schaltfläche zum html hinzufügte:
%Vor%Weil ich das in ein eigenes kleines Browserfenster gesteckt habe, habe ich alle anderen Steuerelemente von der Elternseite über:
entfernt %Vor%Hoffe das hilft!
Tags und Links javascript html printing browser