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

Cet article détaille un <print-preview></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></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 id="Hello-Printer">Hello, Printer!</h1><p>This will look great on paper.</p></paper-sheet></print-preview>

Chaque <paper-sheet></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 et qu'une seule instance est autorisée. Le composant est chargé via JavaScript :

import PrintPreview from './index.js';

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

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

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 id="Invoice">Invoice</h2>
      <p> ... </p>
      <table part="table"></table></paper-sheet>
    `;
  }).join('');

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) ...
}

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

Conclusion :

Le composant <print-preview></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.

Image de couverture par Wendelin Jacober : https://www.php.cn/link/86158a6b3924670a32dad65bbc41bd95

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!