search

Home >Web Front-end >JS Tutorial >Printing HTML best technique with sample receipt.

Printing HTML best technique with sample receipt.

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

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

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

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>

or

document.title = "your-file-name"

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>

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>

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!

JavaScript html print String if for const using map function this tr Access
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Different Ways to Fetch Data from APIs Using `useEffect` in ReactNext article：Different Ways to Fetch Data from APIs Using `useEffect` in React

Related articles

See more