Beste HTML-Drucktechnik mit Musterbeleg.-js-Tutorial-php.cn

Beste HTML-Drucktechnik mit Musterbeleg.

Susan Sarandon

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

Original

970 Leute haben es durchsucht

Printing HTML best technique with sample receipt.

Ich habe mit dem Drucken von Rechnungen mit Javascript und Tailwindcss experimentiert. Nach mehreren Versuchen und Irrtümern ist die folgende Konfiguration die beste, die ich gefunden habe, um optimale Ergebnisse zu erzielen.

(optional) Konfigurieren Sie Tailwindcss

Wenn Sie tailwindcss zum Gestalten Ihrer Rechnung verwenden, können Sie die folgende Konfiguration festlegen, um auf die Präfixe „Drucken“ und „Bildschirm“ zuzugreifen, mit denen Sie Inhalte je nach Ihren Anforderungen ein-/ausblenden können.

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

Nach dem Login kopieren

Jetzt können Sie dies wie folgt nutzen:

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

Nach dem Login kopieren

Verwenden Sie immer eine separate Route und kein Popup-Fenster.

Legen Sie außerdem den Dokumenttitel fest, um das Erlebnis zu verbessern.

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

Nach dem Login kopieren

oder

document.title = "your-file-name"

Nach dem Login kopieren

Verwenden Sie join(''), um die unnötigen Kommas auszublenden, wenn Sie die Elemente wie unten durchlaufen.

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>

Nach dem Login kopieren

Musterbeleg

Exportfunktion quittungGenerator(Verkäufer: beliebig, Bestellung: beliebig): string {
    const panNum = 'XXXXXXXX';
    const companyLogo = // Ihr-Firmenlogo
    const DeliveryAddr = order.deliveryAddress;

    sei Mehrwertsteuer = 0,0;
    sei subTotal = 0;
    let payment = '';
    const tableRows = order.items.map((item, index) => {
        // ...
        return`
            <tr>



<p>Ich hoffe, das hilft! Ich habe zwei Tage gebraucht, um das perfekt zu machen!</p>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeste HTML-Drucktechnik mit Musterbeleg.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!