Meilleure technique d'impression HTML avec un exemple de reçu.-js tutoriel-php.cn

Meilleure technique d'impression HTML avec un exemple de reçu.

Susan Sarandon

Libérer： 2025-01-10 22:34:42

original

968 Les gens l'ont consulté

Printing HTML best technique with sample receipt.

J'ai expérimenté l'impression de factures en utilisant Javascript et Tailwindcss. Après plusieurs essais et erreurs, voici la meilleure configuration que j'ai trouvée pour obtenir les résultats optimaux.

(facultatif) Configurer Tailwindcss

Si vous utilisez tailwindcss pour styliser votre facture, vous pouvez définir la configuration suivante pour accéder aux préfixes « imprimer » et « écran » que vous pouvez utiliser pour masquer/afficher le contenu en fonction de vos besoins.

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

Copier après la connexion

Vous pouvez désormais l'utiliser comme suit :

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

Copier après la connexion

Utilisez toujours un itinéraire séparé, n'utilisez pas de fenêtre contextuelle.

Définissez également le titre du document pour une meilleure expérience.

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

Copier après la connexion

document.title = "your-file-name"

Copier après la connexion

Utilisez join('') pour masquer les virgules inutiles, si vous parcourez les éléments comme ci-dessous.

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>

Copier après la connexion

Exemple de reçu

fonction d'exportation reçuGenerator (vendeur : n'importe lequel, commande : n'importe laquelle) : string {
    const panNum = 'XXXXXXXX';
    const companyLogo = // le logo de votre entreprise
    const deliveryAddr = order.deliveryAddress;

    soit tva = 0,0 ;
    soit sousTotal = 0 ;
    soit monnaie = '' ;
    const tableRows = order.items.map((élément, index) => {
        //...
        retour `
            <tr>



<p>J'espère que cela vous aidera ! Il m'a fallu deux jours pour que ce soit parfait !</p>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!