サンプルレシート付きのHTML印刷ベストテクニック。-jsチュートリアル-php.cn

サンプルレシート付きのHTML印刷ベストテクニック。

Susan Sarandon

リリース： 2025-01-10 22:34:42

オリジナル

968 人が閲覧しました

Printing HTML best technique with sample receipt.

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

ログイン後にコピー

常に別のルートを使用し、ポップアップウィンドウを使用しないでください。

また、エクスペリエンスを向上させるためにドキュメントのタイトルを設定します。

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

ログイン後にコピー

または

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>

ログイン後にコピー

以上がサンプルレシート付きのHTML印刷ベストテクニック。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。