Erstellen einer Print -Vorschau -Webkomponente-js-Tutorial-php.cn

Erstellen einer Print -Vorschau -Webkomponente

DDD

Freigeben： 2025-01-24 20:35:09

Original

819 Leute haben es durchsucht

Dieser Artikel beschreibt eine <print-preview> Webkomponente, die für eine präzise Drucksteuerung und Vorschau entwickelt wurde und eine große Herausforderung bei der Migration einer VBA-Anwendung aus den Jahren 1994–1996 auf eine moderne webbasierte E-Commerce-Plattform bewältigt. Die Abhängigkeit der ursprünglichen Anwendung von MS Access-Berichten erforderte eine robuste Lösung zum Generieren druckbarer Dokumente wie Lieferscheine und Rechnungen in der neuen Webumgebung.

Die <print-preview>-Komponente bietet mehrere Hauptfunktionen:

WYSIWYG-Druckvorschau: Zeigt den Inhalt genau so an, wie er beim Drucken angezeigt wird.
Umfassende Anpassung: Ermöglicht eine detaillierte Kontrolle über Papiergröße, Schriftarten, Ränder und Bildverarbeitung (Anzeigen, Ausblenden oder Umriss).
Vorlagen für dynamische Inhalte: Unterstützt Vorlagen zum Generieren dynamischer Dokumente wie Rechnungen und spiegelt die Funktionalität von MS Access-Berichten wider.
Internationalisierung (i18n):Leicht anpassbar an mehrere Sprachen.

Umsetzung:

Die Komponente wird wie folgt in HTML integriert:

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

Nach dem Login kopieren

Jedes <paper-sheet>-Element repräsentiert eine einzelne Seite. Wichtig ist, dass die Komponente ein direktes untergeordnetes Element des <body>-Elements sein muss und nur eine Instanz zulässig ist. Die Komponente wird über JavaScript geladen:

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

Nach dem Login kopieren

Und angezeigt mit der preview()-Methode:

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

Nach dem Login kopieren

Beispiel für eine Vorlage (Rechnungen):

Vorlagen ersetzen die Funktionalität von Access-Berichten:

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

Nach dem Login kopieren

Styling mit CSS und ::part:

CSS und das Pseudoelement ::part bieten Stilfunktionen ähnlich einem Berichtsdesigner:

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

Nach dem Login kopieren

Direktes Styling innerhalb der Vorlage ist ebenfalls möglich.

Bildbearbeitung:

Die Komponente ermöglicht die Steuerung der Bildsichtbarkeit in der Druckvorschau und bietet Optionen zum Ein-, Ausblenden oder Anzeigen als Umrisse, um Druckertoner zu sparen.

Lokalisierung:

Die Schnittstellensprache der Komponente kann mithilfe des i18n-Objekts:

einfach konfiguriert werden

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

Nach dem Login kopieren

Fazit:

Die <print-preview>-Komponente bietet eine leistungsstarke Lösung für die Verwaltung der Druckausgabe in Webanwendungen und ersetzt effektiv die Berichtserstellungsfunktionen älterer Systeme. Der Autor weist darauf hin, dass sich die Komponente noch in der Entwicklung befindet und möglicherweise Updates und Fehlerbehebungen erhält. Zur weiteren Erkundung stehen eine Demo und ein GitHub-Repository zur Verfügung.

Creating a Print Preview Web Component

Titelbild von Wendelin Jacober: https://www.php.cn/link/86158a6b3924670a32dad65bbc41bd95

Das obige ist der detaillierte Inhalt vonErstellen einer Print -Vorschau -Webkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!