Printing HTML best technique with sample receipt.-JS Tutorial-php.cn

Printing HTML best technique with sample receipt.

Susan Sarandon

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

Original

968 people have browsed it

Printing HTML best technique with sample receipt.

I have been experementing with printing invoices using Javascript and Tailwindcss. After several trials and errors the following is the best configuration I found to get the optimal results.

(optional) Configure Tailwindcss

If you are using tailwindcss to style your invoice then you can set the following configuration to access to 'print' and 'screen' prefixes that you can use to hide/show content based on your requirements.

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

Copy after login

Now you can utilize this as follows:

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

Copy after login

Always use a separate route, do not use a pop up window.

Also, set the document title for better experience.

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

Copy after login

document.title = "your-file-name"

Copy after login

Use join('') to hide the unnecessary commas, if you are looping through the items like below.

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>

Copy after login

Sample Receipt

export function receiptGenerator(seller: any, order: any): string {
    const panNum = 'XXXXXXXX';
    const companyLogo = // your-company-logo
    const deliveryAddr = order.deliveryAddress;

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



<p>Hope this helps! Took me two days to make this perfect!</p>

Copy after login

The above is the detailed content of Printing HTML best technique with sample receipt.. For more information, please follow other related articles on the PHP Chinese website!