Rumah >hujung hadapan web >tutorial js >Mencipta Komponen Web Pratonton Cetakan

Mencipta Komponen Web Pratonton Cetakan

DDDasal: 2025-01-24 20:35:09819semak imbas

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>

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>

Dan dipaparkan menggunakan kaedah preview():

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

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>

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>

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>

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!

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Memahami Pembolehubah Dalam JavaScript: Let, Const dan Var Explained.Artikel seterusnya：Memahami Pembolehubah Dalam JavaScript: Let, Const dan Var Explained.

Artikel berkaitan

Lihat lagi