5 Options de page d'impression jQuery

JQUERY PRINT PLUGIN vous permet de contrôler et de personnaliser les parties du site Web imprimées, fournissant une alternative aux capacités d'impression par défaut du navigateur (imprimant généralement la fenêtre entière). Cet article explorera plusieurs plugins d'impression JQuery populaires et montrera comment créer vous-même cette fonctionnalité.

Points clés:

• JQUERY PRINT PLUGIN vous permet de contrôler et de personnaliser les parties du site Web imprimées, fournissant une alternative aux capacités d'impression par défaut du navigateur (imprimant généralement la fenêtre entière).
• JQUERY PRINT APPREAGIN PRIGIN Ouvre une nouvelle fenêtre de navigateur pour afficher des pièces spécifiques du site Web pour l'impression. Ce plugin est très utile pour imprimer des pièces de données telles que les cartes d'information ou une ligne dans un tableau.
• JQuery Print Plugin fournit une gamme de paramètres pour personnaliser les exigences d'impression. Par exemple, vous pouvez le définir pour apparaître dans la fenêtre actuelle via IFRAME, définir le temps d'attente avant que l'affichage d'impression ne rende et placer du contenu avant ou après la fenêtre contextuelle.
• Si vous souhaitez essayer une solution plus avancée, vous pouvez essayer de créer un élément <iframe></iframe> dynamiquement, ajouter à la page, définir le contenu de <iframe></iframe>, appeler <iframe></iframe> sur .print(), puis Pendant une courte période, retirez-le après retard.

Présentation du plugin JQuery Print:

Bien que l'impression des plugins ne soit pas les plugins les plus excitants, voici quelques plugins que vous voudrez peut-être connaître. Nous expliquerons également brièvement comment créer cette fonctionnalité vous-même si vous souhaitez essayer une solution plus avancée.

Remarque: Les navigateurs plus anciens (je veux dire IE8) peuvent avoir un comportement anormal lors de l'utilisation de certains plugins. Cependant, tous les navigateurs modernes gèrent les aperçus d'impression d'une manière cohérente, alors gardez cela à l'esprit si vous avez besoin d'une compatibilité complète.

jQuery Print Preview

Ce petit plugin jQuery vous permet d'ouvrir une nouvelle fenêtre de navigateur pour afficher des pièces spécifiques du site Web pour l'impression. Contrairement à certains autres plugins de cette liste, ce plugin ne touche pas les fonctionnalités d'impression du navigateur d'envoi, il ouvre simplement une fenêtre minimale (ce qui est parfait, comme vous pouvez l'imprimer directement maintenant).

Le but de ce plugin est lorsque vous avez une partie des données que vous souhaitez imprimer, comme une carte d'information ou une ligne dans un tableau. Vous pouvez l'ouvrir dans une nouvelle fenêtre (offrant des options de configuration pour le plugin) et imprimer à partir de là. Cela garantit que vous imprimez uniquement ce que vous voulez.

Son support de navigateur semble être assez complet et fonctionne bien sur mon navigateur moderne.

Malheureusement, il n'est pas sur Github, il est donc difficile de savoir s'il est activement maintenu. Cependant, cela ne devrait pas vous arrêter, vous pouvez voir si cela fonctionne pour vous, puis l'utiliser tel quel.

jQuery Print Plugin

Ne soyez pas dupe par des manifestations laides. JQuery Print Plugin fonctionne bien et fournit une gamme de paramètres pour vos besoins d'impression personnalisés. Par exemple, vous pouvez définir si la fenêtre contextuelle se trouve dans la fenêtre actuelle (via IFRAME), définir le temps d'attente avant que l'affichage d'impression ne rende et placer du contenu avant / après la fenêtre contextuelle.

Pour commencer à fonctionner, passez-le simplement un objet ou un sélecteur jQuery, et le plugin fera le reste.

L'auteur a publié des soumissions en 2016 pour améliorer le plugin. Bien qu'il n'y ait pas beaucoup de soumissions, cela semble évoluer.

JQUERY PRING PLUGIN

Parlons directement de ce plugin. Il n'a pas été mis à jour depuis longtemps. Alors que certaines personnes peuvent être bouleversées en la voyant pour la dernière fois il y a 6 ans, d'autres (moi y compris) peuvent le voir comme un simple plugin qui fonctionne bien.

Ce plugin crée une petite fenêtre de mode avec des messages et des images chargés avant que le mode d'impression du navigateur principal ne se charge. Il semble fonctionner mieux lorsqu'il est utilisé pour pointer des marques d'ancrage à ce que vous voulez imprimer. Vous pouvez ajouter du contenu imprimable à une nouvelle page, puis utiliser ce plugin pour imprimer. Si votre utilisateur n'activait pas JavaScript, il se liera normalement, ouvrant votre contenu dans une nouvelle fenêtre (où vous pouvez l'imprimer normalement).

jQuery printme

Ce plugin est très basique. Vous l'appelez simplement sur l'élément jQuery que vous souhaitez imprimer et il appellera la fenêtre d'aperçu de l'impression. Il n'y a pas d'option réelle à dire, cela fonctionne exactement comme vous vous y attendez.

Bien qu'il n'ait pas toutes les options comme les autres plugins, ce plugin est très basique et fonctionne bien dans mon navigateur de test. La raison pour laquelle je le recommande est que vous pouvez vérifier son code source et voir comment il passe par étape par étape pour préparer un aperçu d'impression. Si vous voulez le faire vous-même (et ajouter des fonctionnalités et des paramètres supplémentaires), c'est en fait un excellent point de départ.

Je ne m'attends pas à ce que ce plugin fournisse un support. Utilisez-le, si cela fonctionne, ce serait génial! Sinon, vous devez trouver autre chose (ou vous pouvez choisir de le construire vous-même comme indiqué ci-dessous).

jQuery Print Preview Plugin

Le dernier du

La liste est le plugin d'aperçu de JQuery Print. Il est conçu pour fournir aux visiteurs un aperçu de la version imprimée du site Web. Contrairement aux aperçus d'impression traditionnels, ce plugin contient tous les styles de contenu et d'impression dans une fenêtre de mode.

De plus, il est publié avec l'article SitePoint, que vous pouvez lire ici: lorsque les visiteurs impriment - à propos de cette feuille de style imprimée .

Le plugin a une bonne prise en charge du navigateur (traîné vers IE6), mais ne semble pas offrir une autre configuration. Il a également des problèmes non résolus, il peut donc être conclu qu'il n'est plus activement maintenu.

Comment construire cette fonction vous-même?

Créer cette fonctionnalité n'est pas trop difficile. La plupart du travail que ces plugins font dans les coulisses consiste à créer un élément <iframe></iframe> dynamiquement, à l'ajouter à la page (mais à utiliser CSS pour le localiser hors écran), à définir le contenu de <iframe></iframe> et à appeler <iframe></iframe> sur .print(), puis retirez-le après un court délai.

Ce qui suit est de savoir comment faire ceci:

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

Résumé:

L'industrie s'est transformée en pages d'impression (à quelle fréquence imprimez-vous les pages?), Il n'est donc pas surprenant que plusieurs de ces plugins commencent à vieillir.

Cependant, il y a des cas extrêmes où l'impression de la partie page / page est logique. Un exemple est l'impression de l'élément d'enregistrement / code-barres d'événements, ainsi qu'une confirmation de réception / preuve d'achat.

Si vous créez un site Web / application Web et que vous devez imprimer, vous souhaiterez peut-être créer un fichier CSS imprimé uniquement (voir: Créer une feuille de style d'impression personnalisée en minutes ) et ajuster votre disposition parfaitement . Alternativement, vous pouvez utiliser les méthodes décrites ci-dessus pour imprimer uniquement ce qui vous intéresse. Les deux solutions fonctionnent bien, mais la tendance semble passer à l'utilisation de CSS pour configurer les profils d'impression.

(La partie FAQ est omise, car cette partie du contenu a peu à voir avec le plug-in lui-même et est long, vous pouvez donc l'ajouter vous-même selon les besoins)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!