suchen

Heim >Web-Frontend >js-Tutorial >Beste HTML-Drucktechnik mit Musterbeleg.

Beste HTML-Drucktechnik mit Musterbeleg.

Susan Sarandon
Susan SarandonOriginal
2025-01-10 22:34:42971Durchsuche

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

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

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>

oder

document.title = "your-file-name"

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>

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>

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!

JavaScript html print String if for const using map function this tr Access
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verschiedene Möglichkeiten zum Abrufen von Daten von APIs mithilfe von „useEffect“ in ReactNächster Artikel：Verschiedene Möglichkeiten zum Abrufen von Daten von APIs mithilfe von „useEffect“ in React

In Verbindung stehende Artikel

Mehr sehen