5 jQuery Druckseitenoptionen

Mit

JQuery Print Plugin können Sie steuern und anpassen, welche Teile der Website gedruckt werden, und bietet eine Alternative zu Browser -Standarddruckfunktionen (normalerweise drucken Sie das gesamte Fenster). In diesem Artikel werden mehrere beliebte JQuery -Druck -Plugins untersucht und zeigen, wie diese Funktion selbst erstellt werden.

Schlüsselpunkte:

Mit
• JQuery Print Plugin können Sie steuern und anpassen, welche Teile der Website gedruckt werden, und bietet eine Alternative zu Browser -Standarddruckfunktionen (normalerweise drucken Sie das gesamte Fenster).
• JQuery Print Preview Plugin öffnet ein neues Browserfenster, um bestimmte Teile der Website zum Drucken anzuzeigen. Dieses Plugin ist sehr nützlich, um Datenteile wie Informationskarten oder eine Zeile in einer Tabelle zu drucken.
• JQuery Print Plugin bietet eine Reihe von Einstellungen, um die Druckanforderungen anzupassen. Sie können es beispielsweise so einstellen, dass es im aktuellen Fenster über Iframe auftaucht, die Wartezeit vor dem Druckdisplay einstellen und Inhalte vor oder nach dem Popup platzieren.
• Wenn Sie eine fortgeschrittenere Lösung ausprobieren möchten, können Sie versuchen, ein <iframe></iframe> Element dynamisch zu erstellen, es der Seite hinzuzufügen, den Inhalt von <iframe></iframe> zu setzen, <iframe></iframe> auf .print() aufzurufen, und dann Für kurze Zeit entfernen Sie es nach Verzögerung.

JQuery Print Plugin -Übersicht:

Während das Drucken von Plugins möglicherweise nicht die aufregendsten Plugins sind, sind hier einige Plugins, über die Sie vielleicht wissen möchten. Wir werden auch kurz erklären, wie Sie diese Funktion selbst erstellen, wenn Sie eine fortgeschrittenere Lösung ausprobieren möchten.

Hinweis: ältere Browser (ich meine IE8) kann bei der Verwendung bestimmter Plugins abnormales Verhalten haben. Alle modernen Browser handhaben jedoch konsistent mit Druckvorschau. Denken Sie also daran, wenn Sie eine vollständige Kompatibilität benötigen.

JQuery Print Preview

Mit diesem kleinen JQuery -Plugin können Sie ein neues Browserfenster öffnen, um bestimmte Teile der Website zum Drucken anzuzeigen. Im Gegensatz zu einigen anderen Plugins in dieser Liste berührt dieses Plugin nicht die Druckfunktion des Send -Browsers, sondern öffnet nur ein minimales Fenster (was perfekt ist, da Sie es jetzt direkt ausdrucken können).

Der Zweck dieses Plugins ist, wenn Sie einen Teil der Daten haben, die Sie drucken möchten, z. B. eine Informationskarte oder eine Zeile in einer Tabelle. Sie können es in einem neuen Fenster öffnen (Bereitstellung von Konfigurationsoptionen für das Plugin) und von dort aus drucken. Dies stellt sicher, dass Sie nur das drucken, was Sie wollen.

seine Browserunterstützung scheint ziemlich umfassend zu sein und funktioniert gut in meinem modernen Browser.

Leider ist es nicht auf Github, daher ist es schwierig zu wissen, ob es aktiv aufrechterhalten wird. Dies sollte Sie jedoch nicht aufhalten, Sie können sehen, ob es für Sie funktioniert, und es dann so verwenden, wie es ist.

JQuery Print Plugin

Lassen Sie sich nicht von hässlichen Demonstrationen täuschen. JQuery Print Plugin funktioniert gut und bietet eine Reihe von Einstellungen für Ihre benutzerdefinierten Druckanforderungen. Sie können beispielsweise festlegen, ob sich das Popup im aktuellen Fenster (über Iframe) befindet, die Wartezeit vor dem Rendern der Druckanzeige festlegen und den Inhalt vor/nach dem Popup platzieren.

Um mit dem Rennen zu beginnen, übergeben Sie es einfach ein JQuery -Objekt oder ein JQuery -Selektor, und das Plugin macht den Rest.

Der Autor veröffentlichte 2016 einige Einreichungen, um das Plugin zu verbessern. Obwohl es nicht viele Einreichungen gibt, scheint es sich weiterentwickeln.

JQuery PrintPage Plugin

Lassen Sie uns direkt über dieses Plugin sprechen. Es wurde seit langer Zeit nicht mehr aktualisiert. Während einige Leute vielleicht verärgert sein, als es vor 6 Jahren zuletzt aktualisiert wird, können andere (ich selbst eingeschlossen) als einfaches Plugin sehen, das gut funktioniert.

Dieses Plugin erstellt ein kleines Modusfenster mit Nachrichten und Bildern, die vor dem Hauptbrowser -Druckmodus geladen werden. Es scheint am besten zu funktionieren, wenn es verwendet wird, um auf die Ankermarken zu verweisen, was Sie drucken möchten. Sie können einer neuen Seite druckbare Inhalte hinzufügen und dann dieses Plugin zum Drucken verwenden. Wenn Ihr Benutzer JavaScript nicht aktiviert, wird dies normal verlinkt und Ihre Inhalte in einem neuen Fenster öffnen (wo Sie es normal ausdrucken können).

jQuery printme

Dieses Plugin ist sehr einfach. Sie rufen es einfach auf dem JQuery -Element an, das Sie drucken möchten, und es ruft das Druckvorschau -Fenster auf. Es gibt keine wirkliche Option zu sprechen, es funktioniert genau so, wie Sie es erwarten.

Obwohl es nicht alle Optionen wie andere Plugins hat, ist dieses Plugin sehr einfach und funktioniert in meinem Testbrowser gut. Der Grund, warum ich dies empfehle, ist, dass Sie den Quellcode überprüfen und sehen können, wie er Schritt für Schritt durchläuft, um sich auf eine Druckvorschau vorzubereiten. Wenn Sie es selbst tun möchten (und zusätzliche Funktionen und Einstellungen hinzufügen), ist dies tatsächlich ein großartiger Ort zum Starten.

Ich erwarte nicht, dass dieses Plugin Unterstützung bietet. Verwenden Sie es, wenn es funktioniert, wäre das großartig! Wenn nicht, müssen Sie etwas anderes finden (oder Sie können es selbst erstellen, wie unten beschrieben).

JQuery Print Preview Plugin

Das letzte in der Liste

ist das JQuery Print Preview -Plugin. Es ist so konzipiert, dass es den Besuchern eine Vorschau der gedruckten Version der Website bietet. Im Gegensatz zu herkömmlichen Druckvorschau enthält dieses Plugin alle Inhalte und Druckstile in einem Modusfenster.

Zusätzlich wird es mit dem SitePoint -Artikel veröffentlicht, den Sie hier lesen können: Wenn Besucher drucken - über das Druckstilsheet .

Das Plugin hat einen guten Browserunterstützung (zurück zu IE6 gezogen), scheint aber keine andere Konfiguration zu bieten. Es hat auch einige ungelöste Probleme, daher kann der Schluss gezogen werden, dass es nicht mehr aktiv aufrechterhalten wird.

Wie erstellt man diese Funktion selbst?

Diese Funktion erstellen ist nicht allzu schwierig. Die meisten Arbeiten, die diese Plugins hinter den Kulissen erledigen, besteht darin, ein <iframe></iframe> Element dynamisch zu erstellen, es der Seite hinzuzufügen (aber mit CSS, um es außerhalb des Bildschirms zu finden), den Inhalt von <iframe></iframe> festlegen und <iframe></iframe> aufrufen auf .print() und dann nach einer kurzen Verzögerung entfernen.

Folgendes ist, wie dies zu tun ist:

function openPrintDialogue(){
  $('<iframe>', {
    name: 'myiframe',
    class: 'printFrame'
  })
  .appendTo('body')
  .contents().find('body')
  .append(`
    <h1 id="Our-Amazing-Offer">Our Amazing Offer</h1>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173975900525289.png?x-oss-process=image/resize,p_40"  class="lazy" alt="5 jQuery Print Page Options " /></img>  `);

  window.frames['myiframe'].focus();
  window.frames['myiframe'].print();

  setTimeout(() => { $(".printFrame").remove(); }, 1000);
};

$('button').on('click', openPrintDialogue);

Zusammenfassung:

Die Branche hat sich nicht mehr auf Seiten gedreht (wie oft drucken Sie Seiten?), Daher ist es keine Überraschung, dass einige dieser Plugins mit dem Alter beginnen.

Es gibt jedoch einige extreme Fälle, in denen das Drucken des Seiten-/Seitenteils sinnvoll ist. Ein Beispiel ist das Drucken des Ereignisregistrierung/der Barcode -Artikel sowie ein Quittungsbestätigung/ein Kaufnachweis.

Wenn Sie eine Website/Webanwendung erstellen und drucken müssen, möchten Sie möglicherweise eine CSS-Datei nur für Drucke erstellen (siehe: Erstellen Sie in Minuten ein individuelles Druckstylesheet) und passen Sie Ihr Layout perfekt an . Alternativ können Sie die oben beschriebenen Methoden verwenden, um nur das zu drucken, was Sie interessiert. Beide Lösungen funktionieren einwandfrei, aber der Trend scheint zu verändern, dass CSS zum Einrichten von Druckprofilen eingesetzt werden.

(Der FAQS-Teil wird weggelassen, da dieser Teil des Inhalts wenig mit dem Plug-in selbst zu tun hat und lang ist, sodass Sie es selbst hinzufügen können)

Das obige ist der detaillierte Inhalt von5 jQuery Druckseitenoptionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!