Maison >interface Web >js tutoriel >Meilleure technique d'impression HTML avec un exemple de reçu.

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

Susan Sarandonoriginal: 2025-01-10 22:34:421024parcourir

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

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

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>

document.title = "your-file-name"

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>

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>

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!

JavaScript html print String if for const using map function this tr Access

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Différentes façons de récupérer des données à partir d'API à l'aide de « useEffect » dans ReactArticle suivant：Différentes façons de récupérer des données à partir d'API à l'aide de « useEffect » dans React

Articles Liés

Voir plus