Création d'un composant Web d'aperçu avant impression-js tutoriel-php.cn

Création d'un composant Web d'aperçu avant impression

DDD

Libérer： 2025-01-24 20:35:09

original

880 Les gens l'ont consulté

Cet article détaille un <print-preview> composant Web conçu pour un contrôle et un aperçu précis de l'impression, répondant à un défi important lié à la migration d'une application VBA 1994-1996 vers une plate-forme de commerce électronique moderne basée sur le Web. La dépendance de l'application d'origine aux rapports MS Access nécessitait une solution robuste pour générer des documents imprimables tels que des bons de livraison et des factures dans le nouvel environnement Web.

Le composant <print-preview> offre plusieurs fonctionnalités clés :

Aperçu avant impression WYSIWYG : Affiche avec précision le contenu tel qu'il apparaîtra une fois imprimé.
Personnalisation complète : Permet un contrôle précis sur la taille du papier, les polices, les marges et la gestion des images (afficher, masquer ou contour).
Modèles pour le contenu dynamique : Prend en charge les modèles pour générer des documents dynamiques tels que des factures, reflétant les fonctionnalités des rapports MS Access.
Internationalisation (i18n) :Facilement adaptable à plusieurs langues.

Mise en œuvre :

Le composant est intégré au HTML de la manière suivante :

<print-preview><paper-sheet><h1>Hello, Printer!</h1><p>This will look great on paper.</p></paper-sheet></print-preview>

Copier après la connexion

Chaque <paper-sheet> élément représente une seule page. Il est important de noter que le composant doit être un enfant direct de l'élément <body> et qu'une seule instance est autorisée. Le composant est chargé via JavaScript :

import PrintPreview from './index.js';

Copier après la connexion

Et affiché selon la méthode preview() :

const printPreview = document.querySelector('print-preview');
if (printPreview) printPreview.preview();

Copier après la connexion

Exemple de modèle (factures) :

Les modèles remplacent la fonctionnalité des rapports Access :

const invoiceTemplate = (data) => 
  data.map((obj) => {
    // ... (Invoice data processing) ...
    return `
    <paper-sheet><h2>Invoice</h2>
      <p> ... </p>
      <table part="table"></table></paper-sheet>
    `;
  }).join('');

Copier après la connexion

Style avec CSS et ::part :

CSS et le pseudo-élément ::part offrent des capacités de style similaires à celles d'un concepteur de rapports :

print-preview {
  &::part(table) {
    border-collapse: collapse;
    margin-block-start: 4rem;
    width: 100%;
  }
  // ... (other styles) ...
}

Copier après la connexion

Le style direct dans le modèle est également possible.

Gestion des images :

Le composant permet de contrôler la visibilité de l'image dans l'aperçu avant impression, offrant des options pour afficher, masquer ou afficher sous forme de contours afin d'économiser le toner de l'imprimante.

Localisation :

La langue de l'interface du composant est facilement configurable à l'aide de l'objet i18n :

PrintPreview.i18n = {
  es: {
    // ... (Spanish translations) ...
  }
};

Copier après la connexion

Conclusion :

Le composant <print-preview> offre une solution puissante pour gérer la sortie d'impression dans les applications Web, remplaçant efficacement les capacités de génération de rapports des anciens systèmes. L'auteur note que le composant est toujours en développement et peut recevoir des mises à jour et des corrections de bugs. Une démo et un référentiel GitHub sont disponibles pour une exploration plus approfondie.

Creating a Print Preview Web Component