cari

Rumah >hujung hadapan web >tutorial js >Mencetak teknik terbaik HTML dengan contoh resit.

Mencetak teknik terbaik HTML dengan contoh resit.

Susan Sarandon
Susan Sarandonasal
2025-01-10 22:34:421056semak imbas

Printing HTML best technique with sample receipt.

Saya telah bereksperimen dengan mencetak invois menggunakan Javascript dan Tailwindcss. Selepas beberapa percubaan dan kesilapan berikut ialah konfigurasi terbaik yang saya dapati untuk mendapatkan hasil yang optimum.

(pilihan) Konfigurasikan Tailwindcss

Jika anda menggunakan tailwindcss untuk menggayakan invois anda, maka anda boleh menetapkan konfigurasi berikut untuk mengakses awalan 'cetak' dan 'skrin' yang boleh anda gunakan untuk menyembunyikan/menunjukkan kandungan berdasarkan keperluan anda.

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            screens: {
                print: { raw: 'print' },
                screen: { raw: 'screen' }
            },
            // ...
        }
    },
    plugins: []
};

Kini anda boleh menggunakan ini seperti berikut:

<div>



<h2>
  
  
  Add this to your primary CSS file
</h2>



<pre class="brush:php;toolbar:false">/* This will hide the extra header and footer contents added by the browser. */
@media print {
    @page {
        margin: 0.3in 0.7in 0.3in 0.7in !important;
    }
}

/* Change this as you like */
@media screen {
    html,
    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        overflow: auto;
        background-color: #982b44;
    }
}

Sentiasa gunakan laluan yang berasingan, jangan gunakan tetingkap pop timbul.

Selain itu, tetapkan tajuk dokumen untuk pengalaman yang lebih baik.

<head>
    ...
    <title>your-file-name</title>
    ...
</head>

atau

document.title = "your-file-name"

Gunakan join('') untuk menyembunyikan koma yang tidak diperlukan, jika anda sedang mengulangi item seperti di bawah. 

const tableRows = orders.map((item, index) => {
    // ...
    return `
    <tr>



<p>and display this as,<br>
</p>

<pre class="brush:php;toolbar:false"><tbody>
    ${tableRows.join('')}
</tbody>

Contoh Resit 

fungsi eksport receiptGenerator(penjual: mana-mana, pesanan: mana-mana): rentetan {
    const panNum = 'XXXXXXXX';
    const companyLogo = // logo-syarikat-anda
    const deliveryAddr = order.deliveryAddress;

    biarkan tong = 0.0;
    biarkan subJumlah = 0;
    biarkan mata wang = '';
    const tableRows = order.items.map((item, index) => {
        // ...
        kembali `
            <tr>



<p>Semoga ini membantu! Saya mengambil masa dua hari untuk menjadikannya sempurna!</p>

Atas ialah kandungan terperinci Mencetak teknik terbaik HTML dengan contoh resit.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html print String if for const using map function this tr 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：Cara Berbeza untuk Mengambil Data daripada API Menggunakan `useEffect` dalam ReactArtikel seterusnya：Cara Berbeza untuk Mengambil Data daripada API Menggunakan `useEffect` dalam React

Artikel berkaitan

Lihat lagi