Erstellen einer Print -Vorschau -Webkomponente

Dieser Artikel beschreibt eine <print-preview></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></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:

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

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

import PrintPreview from './index.js';

Und angezeigt mit der preview()-Methode:

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

Beispiel für eine Vorlage (Rechnungen):

Vorlagen ersetzen die Funktionalität von Access-Berichten:

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

Styling mit CSS und ::part:

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

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

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

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

Fazit:

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

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!