Mencipta Komponen Web Pratonton Cetakan-tutorial js-php.cn

Mencipta Komponen Web Pratonton Cetakan

DDD

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

asal

861 orang telah melayarinya

Artikel ini memperincikan <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> 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:

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

Salin selepas log masuk

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

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

Salin selepas log masuk

Dan dipaparkan menggunakan kaedah preview():

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

Salin selepas log masuk

Contoh Templat (Invois):

Templat menggantikan kefungsian laporan 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>

Salin selepas log masuk

Menggayakan dengan CSS dan ::part:

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

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

Salin selepas log masuk

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:

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

Salin selepas log masuk

Kesimpulan:

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

Creating a Print Preview Web Component

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!