🎉
pdfmeの動的テーブルをリリースした!🎉
ついにpdfmeのテーブルのバグ直して正式リリースしました!!
- beta版として4月にいくつかのレイアウトのバグを残したままV4に入れたテーブルでしたが、ついにバグ修正を終えて正式にリリースしました!!
- リリース後に取った紹介動画
- playground
挙動・特徴について
- 請求書の取引内容のようにテンプレート作成時には行数が定まらない動的なサイズのテンプレートを利用できるようになった。
- PDFファイル作成時にレイアウトの再計算、ページブレイク処理を行い、「小計」など増えた行の下に位置する要素は下に押し下げ、レイアウトが破綻しないようにします。
- 現時点では basePdf というテンプレートのベースになるPDFが、 width, height, padding で構成された白紙のテンプレートの場合にページブレイクが行われるようになっています。-> 詳細
修正について
-
どんなバグがあったか
- 🔥🔥🔥 [Form & Generator] The page break does not account for pages beyond the second page. #429
- 🔥🔥🔥 [Form & Generator] When spanning across pages, it overlaps due to a padding issue. #428
- 🔥🔥 [Form & Generator] Multiple tables were misaligned when a new page was created. #433
- Table overflowing when the table is in the second page #580
- Generate PDF creating blank pages when trying to render tables (v4 branch) #470
-
どうやって治していったか
- ユーザーから設定されたTemplateをデータに基づいたテンプレートに変換する共通処理の getDynamicTemplate を修正することで対応できた
- 処理の大まかな流れ: ページブレイクを3つのフェーズに分けることでシンプルに解決できた
- ユーザーから設定されたTemplateをデータに基づいたテンプレートに変換する共通処理の getDynamicTemplate を修正することで対応できた
-
良かったこと
- Yoga-layoutを使ってレイアウトの計算をさせるようにした
- 実際Absoluteの配置がベースのため、最終的にYoga-layoutの必要性がなくなったので依存から取り除いた。
- 名残としてYogaNodeを参考にしたクラスがある
- YogaのレイアウトをHTML上に転写したデバッグ環境を作った ↓開発環境の動画
デバッグ環境を作り、レイアウトの計算のみに集中して修正できたのが良かった。
こんなことができます
-
デザイナーでテーブルの設定、デザインなどをカスタマイズしてテンプレートを WYSIWYGで作成することができる。
-
カラムとローの設定
-
カラムの追加、削除、横幅の設定, ローの追加、削除
-
-
スタイルの設定
-
ヘッダー、ボディ、カラムに対してスタイルを設定できます。テーブルのデザインとしては必要十分。
-
大量データで作成した請求書も高いパフォーマンスで正しいレイアウトを保って処理することができます。
これから対応予定なものや課題
- 固定フッターヘッダーを追加できるようにする
- バグの修正
- https://github.com/pdfme/pdfme/issues?q=is%3Aissue+is%3Aopen+label%3Atable
- たまにFormから入力したものがHTMLとして正しく処理されない時がある
まとめ
いやー、このテーブル機能はかなり前からユーザーから要望があり、ずーっと逃げていましたがついに対応できてとても嬉しい。
まだリリースしたばかりなのでまだバグがあるかもしれませんが、とにかく無料ですぐに試せるので、ぜひ使ってみてください。
宣伝: pdfme のクラウドソリューションをお求めの方は pdfme Cloud もご検討ください。
では！また〜！
Discussion