rex0220 印刷屋プラグイン 書式画像を背景に

rex0220 印刷屋プラグイン 書式画像を背景にして領収書を作ってみます。
出来ないことはないが、位置合わせが面倒なので作るのが大変です。

概要

下記のような手順で、書式を取り込んで項目を配置すれば、できそうです。
結構面倒な作業なので、宛名だけ試してみました。

• Excel で作った領収書の書式を png 画像にして、kintone の添付ファイルに入れる
• 印刷屋プラグインのページに、背景画像として設定
• 各項目を領収書の書式に合わせて配置（ブラウザーの開発ツール）を調整

ブラウザーの開発ツールで位置調整

領収書の書式位置を基準として、項目の top, left 等を指定して表示位置を合わせます。

印刷屋プラグイン設定

書式画像を背景にした div を設定し、その要素として、各項目を追加します。

.pcraft-back-image {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

<div class="rex0220-pcraft-page">
    <div class="pcraft-back-image" style="background-image: url(#{&f(20250227231325D28DBAB4BF7A453EB4A2BA388F8195E9054)})">
        <div style="position: absolute; left: 30px; top: 110px; font-size: 22px;">
            ${宛名}
        </div>
    </div>
</div>