サクサク読めて、アプリ限定の機能も多数！アプリで開くはてなブックマーク閉じる ●はてなブックマークって？●アプリ・拡張の紹介●ユーザー登録●

●ログアウト

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

テクノロジーカテゴリーの変更を依頼記事元:

zenn.dev/ttskch

1089 usersがブックマークコメント

118

現在プライベートモードです設定を変更する

1089 users zenn.dev/ttskch

現在プライベートモードです設定を変更する

みんなの興味と感想が集まることで新しい発見や、深堀りがもっと楽しくアカウントをお持ちの方はログインページへ

記事へのコメント118件

●注目コメント ●新着コメント

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

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

izoc 多少のWYSIWYGを犠牲にしてでも圧倒的なメンテナンス性のExcel出力→PDF変換を推しますね ●pdf ●webサービス ●技術 2021/06/06 リンクその他 ● ● ●

nonorth そもそも帳票を作るな！😡 2021/06/06 リンクその他 ● ● ●

capsxen chromeで印刷してみたら空白の2ページ目が出現した 2021/06/06 リンクその他 ● ● ●

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

chOn 帳票作るなって、業種によっては法律で決まった様式に出力しなきゃいけないとかあるしねぇ印刷しないにしてもPDFまでは手段もっておかないと。 2021/06/06 リンクその他 ● ● ●

ssttaacc 行やページ可変がない固定フォームへの流し込みならこれでよさそう。 2021/06/06 リンクその他 ● ● ●

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

megane1972 人気ブコメが厳しすぎて引く。いろんな方法があれば好きに組み合わせられていいじゃない？技術も多様性が大事。Inkscapeで試してみようと思う。 ●あとで読む 2021/06/06 リンクその他 ● ● ●

KoshianX はー、Chrome の headless モードで --print-to-pdf なんてあるのかいな。これはアリだなあ。 2021/09/25 リンクその他 ● ● ●

mohno ﹁XDやFigmaでデザインしてSVGでエクスポートしたものをテンプレートとしてそのままHTMLに埋め込んで出力﹂ https://speakerdeck.com/ttskch/tuini-webapuridefalsezhang-piao-yin-shua-falsebesutopurakuteisuwobian-michu-simasita ●たつきち ●Web ●PDF ●Adobe ●SVF ●Figma ●帳票 ●SpeakerDeck 2021/09/25 リンクその他 ● ● ●

masayoshinym ここに辿り着くまでに想像を超える試行錯誤の連続があったんだろうな、と思った。 ●プログラミング系読物 2021/06/09 リンクその他 ● ● ●

smbd すごい 2021/06/09 リンクその他 ● ● ●

mas-higa なんだよ。LaTeX で埋め込みかと思ったら違うじゃないか! 2021/06/07 リンクその他 ● ● ●

field_combat 確かによさそう。帳票はちょっとズレてると嫌がるのをやめたらみんな幸せになれそうなのに。 ●webサービス 2021/06/07 リンクその他 ● ● ●

djshigy ベストプラクティス,PDF 2021/06/07 リンクその他 ● ● ●

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

kibitaki 成果物に使われてる技術からしたらcolspanが苦行ってのがさっぱりわからない。 ●帳票 2021/06/07 リンクその他 ● ● ●

tumo300-500 帳票に使うかは置いておいて、SVG をテンプレートとして使うテクニックは使い所ありそう 2021/06/07 リンクその他 ● ● ●

aktkro このやり方で複数ページにまたがる時にうまくいくのか？という気持ち。帳票SaaSのdocurain使おう。 2021/06/06 リンクその他 ● ● ●

mabushii_sign SIでもSVFを使うのはお金がある場合だけ。こういう情報は助かる。 2021/06/06 リンクその他 ● ● ●

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

hiro7373 Googleスライドあたりで行けそうな気がする ●コメント 2021/06/06 リンクその他 ● ● ●

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

nmcli 例に漏れず、Excel→PDFになった。WebアプリによってはSVGで出せるのはありがたいかも。 ●ビジネス 2021/06/06 リンクその他 ● ● ●

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

imwks firefoxでデモサイトみたら2ページ目が空白ページとなってた・・ 2021/06/06 リンクその他 ● ● ●

toaruR むかーし、FDFでやった 2021/06/06 リンクその他 ● ● ●

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

kkobayashi そもそも帳票をデザインしなくて良いように業務を変えることだよな 2021/06/06 リンクその他 ● ● ●

ryu39 この記事もブコメも参考になる、ありがたい。 2021/06/06 リンクその他 ● ● ●

rryu HTMLがダメな理由が自分にスキルが無いからだった。今はflexとかもあるし全体をTABLE要素にする苦行をしなくてもできると思う。 ●web 2021/06/06 リンクその他 ● ● ●

NOV1975 メモメモ／SI系ならSVFとか言うけど大量かつ大量じゃない限りあんなコスパ悪いもの使わんわ。 ●web 2021/06/06 リンクその他 ● ● ●

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

catnapper_mar 何かと帳票がついて回るB2Bサービスやってる人にはかなり参考になる知見では。 ●帳票 Figma XD 2021/06/06 リンクその他 ● ● ●

tokuninac 株式会社ほげほげほげほげほげほげ　で笑ったw 2021/06/06 リンクその他 ● ● ●

endo_5501 SVGをこういう用途に使うのは目新しく感じる ●デザイン 2021/06/06 リンクその他 ● ● ●

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

ultimatebreak ベストプラクティス警察が生まれた記事 2021/06/06 リンクその他 ● ● ● 注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の﹁建設的コメント順位付けモデルAPI﹂を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fzenn.dev%2Fttskch%2Farticles%2F1f1572cfd2e375" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://akarinohon.com/text/taketori.cgi/https://zenn.dev/ttskch/articles/1f1572cfd2e375">ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました</a><a href="https://akarinohon.com/text/taketori.cgi/https://b.hatena.ne.jp/entry/s/zenn.dev/ttskch/articles/1f1572cfd2e375">はてなブックマーク - ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました</a></div></iframe>

プレビュー

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

いまの話題をアプリでチェック！ ●バナー広告なし ●ミュート機能あり ●ダークモード搭載アプリをダウンロード

usersに達しました！

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