Mencipta Komponen Web Pratonton Cetakan

Artikel ini memperincikan <print-preview></print-preview> komponen web yang direka untuk kawalan cetakan dan pratonton yang tepat, menangani cabaran penting dalam memindahkan aplikasi VBA 1994-1996 ke platform e-dagang berasaskan web moden. Pergantungan aplikasi asal pada laporan MS Access memerlukan penyelesaian yang mantap untuk menjana dokumen boleh cetak seperti slip pembungkusan dan invois dalam persekitaran web baharu.

Komponen <print-preview></print-preview> menawarkan beberapa ciri utama:

• Pratonton Cetakan WYSIWYG: Memaparkan kandungan dengan tepat kerana ia akan muncul apabila dicetak.
• Penyesuaian Komprehensif: Membenarkan kawalan terperinci ke atas saiz kertas, fon, jidar dan pengendalian imej (tunjukkan, sembunyikan atau gariskan).
• Templat untuk Kandungan Dinamik: Menyokong templat untuk menjana dokumen dinamik seperti invois, mencerminkan kefungsian laporan MS Access.
• Pengantarabangsaan (i18n): Mudah disesuaikan dengan berbilang bahasa.

Pelaksanaan:

Komponen disepadukan ke dalam HTML seperti berikut:

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

Setiap elemen <paper-sheet></paper-sheet> mewakili satu halaman. Yang penting, komponen mestilah anak langsung daripada elemen dan hanya satu contoh dibenarkan. Komponen dimuatkan melalui JavaScript:

import PrintPreview from './index.js';

Dan dipaparkan menggunakan kaedah preview():

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

Contoh Templat (Invois):

Templat menggantikan kefungsian laporan 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('');

Menggayakan dengan CSS dan ::part:

CSS dan ::part elemen pseudo menyediakan keupayaan penggayaan yang serupa dengan pereka bentuk laporan:

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

Penggayaan langsung dalam templat juga boleh dilakukan.

Pengendalian Imej:

Komponen membenarkan kawalan ke atas keterlihatan imej dalam pratonton cetakan, menawarkan pilihan untuk menunjukkan, menyembunyikan atau memaparkan sebagai garis besar untuk menjimatkan toner pencetak.

Penyetempatan:

Bahasa antara muka komponen mudah dikonfigurasikan menggunakan objek i18n:

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

Kesimpulan:

Komponen <print-preview></print-preview> menawarkan penyelesaian yang berkuasa untuk mengurus output cetakan dalam aplikasi web, dengan berkesan menggantikan keupayaan penjanaan laporan sistem lama. Pengarang menyatakan bahawa komponen itu masih dalam pembangunan dan mungkin menerima kemas kini dan pembetulan pepijat. Demo dan repositori GitHub tersedia untuk penerokaan lanjut.

Cover Image oleh Wendelin Jacober:

Atas ialah kandungan terperinci Mencipta Komponen Web Pratonton Cetakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!