ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました

この記事で紹介した手順をライブラリ化して公開しました🎉 こちらの別記事 で使い方など詳しくご紹介していますので、ぜひご参照ください！ はじめに 言い切りタイトルすみません 僕を含む一定数の人にとって現時点でのベストプラクティスとなりうる手法という意味で紹介しています 極めてシビアな帳票出力の世界にいる人から見ると使い物にならない内容かもしれないと思います 帳票印刷の世界では SVF というサービスが有名らしいです。が、こういった外部サービスは使わずに自力で実装するというのがこの記事の前提です 動的に明細行の数が増減する連票はこの記事の解説では考慮していませんが、追加で実装するのはそれほど難しくないということは読んでいただければ分かるかなと思います 結論から 僕が考える現時点でのWebアプリでの帳票印刷のベストプラクティスは、 Adobe XD や Figma で帳票のレイアウトをデザイン

[awkad]

このあたりはSI系と世界の断絶を感じるね。意地でも商用ソフトは買わないんだな。SVFなり買えばいいだけでしょ。関係ないけどジョブ系もショボいOSS使うならJP1とか買えばいいのにと思う。

[lenore]

こうやって自分が手を動かして辿り着いた方法を発表してくれるだけ充分いいと思うよ。皆の意見も集まるし。/「オレ的ベストプラクティス」ってことで。/自分はExcelテンプレート利用(PDFオプション有)派。大量帳票は商用

[izoc]

多少のWYSIWYGを犠牲にしてでも圧倒的なメンテナンス性のExcel出力→PDF変換を推しますね

[nonorth]

そもそも帳票を作るな！😡

[capsxen]

chromeで印刷してみたら空白の2ページ目が出現した

[hyperash]

頻繁にバージョンが上がるブラウザの印刷機能に依存するのは怖いなあ。ブラウザ別のテストが増えるというのもデメリットか。Excel→PDF変換のほうが保守コストが圧倒的に低いし実現できることも多い。負荷対策は要る。

[chOn]

帳票作るなって、業種によっては法律で決まった様式に出力しなきゃいけないとかあるしねぇ印刷しないにしてもPDFまでは手段もっておかないと。

[ssttaacc]

行やページ可変がない固定フォームへの流し込みならこれでよさそう。

[ka-ka_xyz]

個人的には、「コンテナ上でテンプレートからhtmlを生成してからpdfに変換(nodejsでEJS -> electron-pdf。仮想ディスプレイ環境が必要)」にたどり着いた。重いのだけどhtmlベースで作れてかつクライアント環境に左右されないので

[megane1972]

人気ブコメが厳しすぎて引く。いろんな方法があれば好きに組み合わせられていいじゃない？技術も多様性が大事。Inkscapeで試してみようと思う。

[KoshianX]

はー、Chrome の headless モードで --print-to-pdf なんてあるのかいな。これはアリだなあ。

[mohno]

「XDやFigmaでデザインしてSVGでエクスポートしたものをテンプレートとしてそのままHTMLに埋め込んで出力」 https://speakerdeck.com/ttskch/tuini-webapuridefalsezhang-piao-yin-shua-falsebesutopurakuteisuwobian-michu-simasita

[masayoshinym]

ここに辿り着くまでに想像を超える試行錯誤の連続があったんだろうな、と思った。

[smbd]

すごい

[mas-higa]

なんだよ。LaTeX で埋め込みかと思ったら違うじゃないか!

[field_combat]

確かによさそう。帳票はちょっとズレてると嫌がるのをやめたらみんな幸せになれそうなのに。

[djshigy]

ベストプラクティス,PDF

[seal2501]

TCPDFで頑張ってたけど結局あれも地獄のコードになるので、なんらかの流し込めるもの欲しいな…SVGもアウトライン化してないからそら環境依存ある

[kibitaki]

成果物に使われてる技術からしたらcolspanが苦行ってのがさっぱりわからない。

[tumo300-500]

帳票に使うかは置いておいて、SVG をテンプレートとして使うテクニックは使い所ありそう

[aktkro]

このやり方で複数ページにまたがる時にうまくいくのか？という気持ち。帳票SaaSのdocurain使おう。

[mabushii_sign]

SIでもSVFを使うのはお金がある場合だけ。こういう情報は助かる。

[penult]

雰囲気からしてWindowsではあんまり確認してなさそうだなと思ったら、やっぱりWindowsでは普通に商品名や型番がはみ出していた…

[hiro7373]

Googleスライドあたりで行けそうな気がする

[caribou404]

各ブラウザの印刷機能に依存したくないという人は、puppeteerなどでHeadless chromeを使ったpdf生成サーバをBFF的に立てるのおすすめ

[nmcli]

例に漏れず、Excel→PDFになった。WebアプリによってはSVGで出せるのはありがたいかも。

[rarao1048]

画面ではうまく出ているのに印刷時におかしくなるのはあるある。なぜ、ずれてしまうのかが、未だに分かってない。分かってないから根本解決や開発前に回避ができないのだなあと感じた

[imwks]

firefoxでデモサイトみたら２ページ目が空白ページとなってた・・

[toaruR]

むかーし、FDFでやった

[northlight]

まあ正直SIだと確実に動くSVFとか使っちゃうかなとは思った。この方式を誰かが担保してくれればいいんだけどね…

[kkobayashi]

そもそも帳票をデザインしなくて良いように業務を変えることだよな

[ryu39]

この記事もブコメも参考になる、ありがたい。

[rryu]

HTMLがダメな理由が自分にスキルが無いからだった。今はflexとかもあるし全体をTABLE要素にする苦行をしなくてもできると思う。

[NOV1975]

メモメモ／SI系ならSVFとか言うけど大量かつ大量じゃない限りあんなコスパ悪いもの使わんわ。

[frontline]

今までのやり方しかわからない人にメンテ法まで教える所までどこかに委託できるならいいとおもう。問題は技術でなく人間であることの方が多いので。あ、内容は大いに賛成っす！

[catnapper_mar]

何かと帳票がついて回るB2Bサービスやってる人にはかなり参考になる知見では。

[tokuninac]

株式会社ほげほげほげほげほげほげ　で笑ったw

[endo_5501]

SVGをこういう用途に使うのは目新しく感じる

[voidy21]

この方法はあり！あとは拠点のプリンタごとに印刷位置調整する要件とかをすっ飛ばせるような政治力ですねぇ

[ultimatebreak]

ベストプラクティス警察が生まれた記事