Mencetak teknik terbaik HTML dengan contoh resit.

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.

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

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>


          

            
        </tr>