Mencetak teknik terbaik HTML dengan contoh resit.-tutorial js-php.cn

Mencetak teknik terbaik HTML dengan contoh resit.

Susan Sarandon

Lepaskan： 2025-01-10 22:34:42

asal

1054 orang telah melayarinya

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: []
};

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

atau

document.title = "your-file-name"

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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