Maison >interface Web >js tutoriel >Création d'un composant Web d'aperçu avant impression

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

DDDoriginal: 2025-01-24 20:35:09828parcourir

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 :

<code class="language-html"><print-preview><paper-sheet><h1>Hello, Printer!</h1><p>This will look great on paper.</p></paper-sheet></print-preview></code>

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 :

<code class="language-javascript">import PrintPreview from './index.js';</code>

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

<code class="language-javascript">const printPreview = document.querySelector('print-preview');
if (printPreview) printPreview.preview();</code>

Exemple de modèle (factures) :

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

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

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 :

<code class="language-css">print-preview {
  &::part(table) {
    border-collapse: collapse;
    margin-block-start: 4rem;
    width: 100%;
  }
  // ... (other styles) ...
}</code>

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 :

<code class="language-javascript">PrintPreview.i18n = {
  es: {
    // ... (Spanish translations) ...
  }
};</code>

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

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!

JavaScript css html print Object for using Interface this display github https bug Access

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comprendre les variables en JavaScript: LET, const et var expliqué.Article suivant：Comprendre les variables en JavaScript: LET, const et var expliqué.

Articles Liés

Voir plus