rex0220 印刷屋プラグインで、見積書の社印変更と位置調整をしてみます。

概要

少し大きめの社印を他の文字にかぶらないように配置してみます。
社印は、画像ファイルアプリに添付ファイルとして登録して、それを見積書で利用します。

テスト用社印の作成

今回は、テスト用社印作成ツール作成メモで、作成したpng画像を利用します。

画像ファイルアプリへの登録と fileKey の確認

レコードに社員の画像ファイルを登録します。

ブラウザーの開発ツールで、登録した画像の fileKey を確認できます。

console タブで、「kintone.app.record.get()」を入力して実行し、レコードの内容を表示。
添付ファイルの値に fileKey があります。

fileKey の変更

社印欄の fileKey を変更します。

#{&f(...)}

// 変更前
      VTAG("img", ATTR("class", "pcraft-inv-seal", "width", "250", "height", "120", "src", "#{&f(20250302031501227586874B104969A58F90E42C4C3C26073)}"))

// 変更後
      VTAG("img", ATTR("class", "pcraft-inv-seal", "width", "250", "height", "120", "src", "#{&f(20250305012652A3307F05B9B648E89C9751D72C67CF3D014)}"))

変更後の社印確認

社印が変更されたか確認します。

社印の位置調整

プレビュー画面の社印上で、右クリックしてメニューから「検証」を選択すると開発ツールで、社印の要素を表示できます。

位置を left, 大きさを width で変更して真ん中あたりに配置します。
位置は、親要素の pcraft-inv-right (position: relative;指定)を基準にして指定します。

left: -120px;
width: 120px;

印刷屋プラグイン設定で CSS の変更

先ほど調整した css をプラグイン設定で指定します。

.pcraft-inv-seal {
    left: -120px;
    width: 120px;
}

プレビュー画面で確認

プレビュー画面で、css の変更が反映されているか確認します。

PDF で確認

プレビュー画面通りに PDF が作成されるか確認します。