rex0220 印刷屋プラグイン 請求書の作成例

rex0220 印刷屋プラグインで、請求書を作成する例です。

概要

基本的なHTML, CSSの構成は、見積書と同じです。
上部に登録番号、一番下に銀行の振込先が追加されています。

見積書と請求書の比較

印刷屋プラグイン設定

計算式ですべての HTML を生成する例です。
見積書と同様に、HTML+計算式の設定でも対応可能です。

• HTML 設定

請求書-計算式

PAGE_HTML(
  TAG("div", ATTR("class", "pcraft-inv-header"), "請求書"),

  TAG("div", ATTR("class", "pcraft-inv-info"),

    // header left
    TAG("div", ATTR("class", "pcraft-inv-left"),
      TAG("p", 宛名 & " 御中"), VTAG("br"),
      TAG("p", ATTR("class", "pcraft-inv-estimate-amount"), "請求金額:", TAG("span", FVAL(合計金額))),
    ),

    // header right
    TAG("div", ATTR("class", "pcraft-inv-right"),
      TAG("p", "請求番号: " & 請求番号),
      TAG("p", "発行日: " & DATE_FORMAT(請求日, "YYYY年M月D日")),
      TAG("p", "登録番号： T0000000000000"),
      TAG("p", "株式会社サンプルサンプルサンプル"),
      TAG("p", "開発 太郎"),
      VTAG("img", ATTR("class", "pcraft-inv-seal", "width", "250", "height", "120", "src", "#{&f(20250224144344126E43A90D994A32B0C6FE39295544E7236)}"))
    )
  ),

  // table
  TABLE_HTML(見積明細,
    OPT("pref", "pcraft-inv-item-"),
    ARRAY("#", ROWNO(見積明細) + 1),
    商品名, 数量, 単価, 金額
  ),

  // summary
  TAG("div", ATTR("class", "pcraft-inv-summary-section"),
    // 備考
    TAG("div", ATTR("class", "pcraft-inv-remarks-section"),
      TAG("strong", "備考:"), VTAG("br"),
      TAG("span", "ご注文ありがとうございます")
    ),
    // 合計
    TAG("div", ATTR("class", "pcraft-inv-total-section"),
      TAG("table",
        TAG("tbody",
          TAG("tr", TAG("th", "小計"), TAG("td", FVAL(小計金額))),
          TAG("tr", TAG("th", "消費税 (10%)"), TAG("td", FVAL(消費税))),
          TAG("tr", TAG("th", TAG("strong", "合計")), TAG("td", TAG("strong", FVAL(合計金額))))
        )
      )
    )
  ),

  // footer
  TAG("div", ATTR("class", "pcraft-inv-footer"),
    TAG("p", "お振込先: 〇〇〇〇銀行 〇〇支店（普）0000000 〇〇〇〇〇〇"),
    TAG("p", "＊お振込み手数料はご負担をお願い致します")  
  )
)

見積書と請求書の比較

コードを比較すると、よく似ているのがわかります。
実際に、見積書を流用して、請求書のコードを作成しています。