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

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>Our Amazing Offer</h1>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173975900525289.png"  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!