【後編】WebアプリでのPDF帳票印刷問題をPleasanter＆pdfmeで解決！

はじめに

この記事はQiitaのOSSのノーコード・ローコード開発ツール「プリザンター」 Advent Calendar 2025に投稿した【前編】WebアプリでのPDF帳票印刷問題をPleasanter＆pdfmeで解決！
の後編です。

前編で紹介した帳票印刷アプリの設定方法を示します。
ハンズオン的に説明しますので、ご自身の環境でもぜひお試しください。

動作環境

• Windowws11
• Pleasanter コミュニティエディション/Docker版
• pdfme 5.5
• Node.js 20.19

前提条件・対象

• セルフホスト版Pleasanterを構築済み(SaaS版以外ならOK)
• Windowws11/WSL/Linuxなどのnode実行環境があること

できること

この構成に至るまでの他の方や私の試行錯誤の内容については前半に記載していますので、ぜひそちらもご覧ください。

大まかな構成と役割

1. Webサーバーの設定
   • pdfmeの描画コンポーネントであるデザイナーのUI提供
2. APIサーバーの設定
   • pdfmeの帳票生成コンポーネントであるジェネレーターのエンドポイント
3. Plesasanterのサイトパッケージ設定
   • 請求書作成アプリとしてユーザーが操作する部分
   • 帳票、明細、pdfmeテンプレの各情報を登録

ユースケース

まずはPlesasanterに帳票の情報を登録します。

• 表示しているテーブル(画面上部)は、帳票のヘッダー＆フッター部分に相当する請求先の社名や担当者名の情報を持っています。
• 下部にリンク元として付属しているテーブルは、請求書の明細行に相当する個別商品の名称や個数、価格の情報を持ちます。
  
  リンク元となる子テーブルが明細情報として登録されている(画像下部)

情報の登録が完了したら、プレビュータブを開いてプレビューボタンを押すことで、PDFを取得できます。

右下のプレビューボタンを押すことで自動的にPlesasanterの帳票・明細をPDFで生成

印刷ボタンを押すことでブラウザの印刷モジュールが起動し、PDF生成/印刷が可能です。

ブラウザの新しいタブでPDFを開き、印刷モジュールが立ち上がる

補足

PDF帳票の作成にはpdfme^[1]というライブラリを使用しています。
左のキャプチャの赤枠部分がpdfmeのデザイナーと呼ばれる編集UIで、iframeで埋め込んでいます。

デザイナー(左)で作成した帳票テンプレートは、設定用の別サイト(右)に事前設定する

検証環境のため各サーバーはHTTPで構築しています。

HTTPSで運用している本番Plesasanterに組み込むためには、pdfme側もHTTPS対応する必要があります。(ブラウザによってHTTP/Sの混合コンテンツ^[2]と判定されるはず)
またPlesasanterのHTMLに

構築手順

構築手順では大きく3ステップの作業が必要です。
長いですが皆さんはコピペで行けますのでご安心ください。

1. Webサーバーの設定
   • Githubからpdfme-pleasanter-UIをクローンし、WEBサーバーを起動
2. APIサーバーの設定
   • APIキーの発行
   • Githubからpdfme-pleasanter-expressをクローンし、APIサーバーを起動
3. Plesasanterのサイトパッケージ設定
   • pdfme-pleasanter-UIのtestフォルダにあるサイトパッケージの設定ファイル導入
   • スクリプト設定にてAPIキー、サイトIDの調整

(構成図での配置が右から左に説明しています。逆に書けばよかった。。)

構成図：3台のサーバーが連携する。記事の構成ではpdfme用の2台は同じWSL上に構築

Webサーバーの設定

WSLで作業します。
フォルダ構成などの詳細はリポジトリのREADMEをご覧ください。
https://github.com/aToy0m0/pdfme-pleasanter-UI

クローン、開発環境起動

git clone https://github.com/aToy0m0/pdfme-pleasanter-UI.git
cd pdfme-pleasanter-UI
npm install

ビルド、本番起動

npm run build
npm start

検証のためSystemdサービス化などは想定していません。

動作確認

ブラウザで以下にアクセスします。

http://localhost:3000

デザイナータブの左からドラッグドロップでオブジェクトを配置できればOKです。
i18nの練習で、地味に日英の言語切り替えも実装してみました。

APIサーバーの設定

こちらもWSLで作業します。
フォルダ構成などの詳細はリポジトリのREADMEをご覧ください。
https://github.com/aToy0m0/pdfme-pleasanter-express

クローン、依存関係追加

git clone https://github.com/aToy0m0/pdfme-pleasanter-express.git
cd pdfme-pleasanter-express
npm install

APIキー用文字列の生成

実行環境に合わせてコマンドを実行し、APIキーとして使うためにメモしてください。
Windows用コマンドも置きましたが、WSLがあるならそちらの方が楽です。

# PowerShell
[byte[]]$bytes = New-Object byte[] 32
[System.Security.Cryptography.RandomNumberGenerator]::Create().GetBytes($bytes)
[Convert]::ToBase64String($bytes)

# Linux shell
openssl rand -base64 32

環境変数の設定

変更必須なのはAPI_KEYのみです。

cp .env.example .env
API_KEY                # opensslで生成したキー
PORT                   # デフォルトポート3001。変更した場合はAPI接続先設定の修正が必要
CORS_ORIGIN            # デフォルトですべて許可(*)。制限する場合はFQDLを指定

後でPlesasanterのスクリプトにも設定します。

APIサーバー起動

npm start

動作確認

APIサーバーリポジトリ(-expressの方)のtest/フォルダにあるclient.jsで、const API_KEY = "この中がAPIキー";部分にopensslで生成したキーを設定します。
index.htmlをブラウザで開きます。

テンプレにtemplate-sample.json、入力にinput-sample.jsonを設定し、APIボタンを押したら、PDFが表示されればOKです。

Pleasanterサイトパッケージの設定

Webサーバーリポジトリ(-UIの方)のtest/フォルダにあるpdfme_pleasanter_aToy0m0.jsonをインポートします。
(記事作成はこのパートが一番大変です！)
https://github.com/aToy0m0/pdfme-pleasanter-UI/blob/main/test/pdfme_pleasanter_aToy0m0.json#L179

設定のインポート

キャプチャの通りにインポートします。

サイトパッケージのインポート

Pleasanter設定用jsonをインポート

正常にインポート出来たら、以下のようなフォルダが構築されます。

「帳票テンプレート」サイトの設定

「帳票テンプレート」のサイトID(items/XX/index)を控えて、テンプレをアップし、作成。
→ サイトIDは後でMASTER_SITE_IDとして使います。

「請求書明細」サイトの確認

「請求書明細」のサイトID(items/XX/index)を控えます。
→ サイトIDは後でCHILDREN_SITE_IDとして使います。

「請求書-PDF生成」サイトのデータ登録

「請求書-PDF生成」で新規レコードを作成し、適当な値を入力します。

帳票テンプレート欄は必ず選択してください。

「請求書-PDF生成」に紐づく明細行を作成

リンクしたアイテムの作成ボタンで、適当な明細行を作成します。

「請求書-PDF生成」サイトのスクリプト

まずは「API設定」からPlesasanterのAPIキーを発行し、これも控えます。

次に「テーブルの管理」＞「スクリプト」＞「client_import-json-master」を開いて以下(ｘｘｘｘｘｘｘｘ)を設定します。

const API_BASE_URL = "http://localhost:3001";
const API_PATH = "/api/pdf/generate";
const API_KEY = "ｘｘｘｘｘｘｘｘ";          // APIサーバー用にopensslで生成したキー
const MASTER_SITE_ID = "ｘｘｘｘｘｘｘｘ";   // 帳票テンプレートのサイトID
const CHILDREN_SITE_ID = "ｘｘｘｘｘｘｘｘ"; // 請求書明細のサイトID

// Pleasanter 自身へのAPI (添付ダウンロード)
// const PLEASANTER_BASE_URL = "http://localhost:8080"; // コンテナ内待受ポート
const PLEASANTER_BASE_URL = "http://localhost:50001"; // コンテナ外待受ポート
const PLEASANTER_API_KEY = "ｘｘｘｘｘｘｘｘ";

最後の更新ボタンを忘れないでください。

完成😎

「請求書-PDF生成」サイトで「プレビュー」ボタンを押してPDFを生成しましょう！
リンク元の明細行を増やすことで、帳票の緑色部分が増えることをご確認ください！

　↓　↓　↓　↓　↓

おわりに

Pleasanter＆pdfmeでPDF帳票の作成アプリを構築する方法をご紹介しました。
前半の記事にも書いた通り、このアプリが持っている以下の特徴を個人開発するのはかなり大変です。

• 明細行を増やすと、帳票内の明細も増える
• 明細がページいっぱいになったら、自動的に改ページされる
• 明細の下にある要素も連動してページ移動する

便利な改善ツールのPleasanter、柔軟なPDF生成のpdfme、OSS開発者様様ですね！！
ありがとうございます！

pdfmeのデザイナーに関しては説明しきれなかったので、公式サイトのデザインページ^[3]にお任せします。

✍️ この記事が参考になったら「いいね」「ブックマーク」「フォロー」をお願いします。
Xで絡んでいただくのも大歓迎です！
https://x.com/aToy0m0

脚注

1. https://pdfme.com/ja/

2. https://developer.mozilla.org/ja/docs/Web/Security/Defenses/Mixed_content

3. https://pdfme.com/ja/template-design