サンプルレシート付きの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>

サンプル受領書

エクスポート関数 RecipeGenerator(販売者: 任意、注文: 任意): string {
    const panNum = 'XXXXXXXX';
    const companyLogo = // 会社のロゴ
    constdeliveryAddr = order.deliveryAddress;

    vat = 0.0 とします。
    subTotal = 0 とします。
    通貨 = '';
    const tableRows = order.items.map((項目, インデックス) => {
        // ...
        `を返す
            <tr>



<p>これがお役に立てば幸いです!これを完璧にするのに 2 日かかりました!</p>


          

            
        </tr>