列印 HTML 最佳技術與樣本收據。

我一直在嘗試使用 Javascript 和 Tailwindcss 列印發票。經過多次嘗試和錯誤後，以下是我發現最佳結果的最佳配置。

（可選）配置 Tailwindcss

如果您使用 tailwindcss 來設計發票樣式，那麼您可以設定以下配置來存取「print」和「screen」前綴，您可以使用它們根據您的要求隱藏/顯示內容。

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

現在您可以如下使用它：

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

始終使用單獨的路線，不要使用彈出視窗。

另外，設定文件標題以獲得更好的體驗。

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

或

document.title = "your-file-name"

如果您要循環存取如下所示的項目，請使用 join('') 隱藏不必要的逗號。

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>

收據樣本

匯出函數收據產生器（賣家：任何，訂單：任何）：字串{
    const panNum = 'XXXXXXXX';
    const companyLogo = // 你的公司徽標
    const DeliveryAddr = order.deliveryAddress;

    讓增值稅= 0.0；
    讓小計 = 0;
    讓貨幣=''；
    const tableRows = order.items.map((item, index) => {
        // ...
        回傳`
            <tr>



<p>希望這有幫助！我花了兩天才把這個做到完美！ </p>


          

            
        </tr>