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

気に入った記事をブックマーク

気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
記事を読んだ感想やメモを書き残せます
非公開でブックマークすることもできます

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

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

zenn.dev/ttskch

適切な情報に変更

エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます

コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

次回からTwitterへ自動リダイレクト

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

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

115

コメントするにはログインが必要ですブックマークを追加

ブックマークを追加

よく使うタグ

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

1090 users

zenn.dev/ttskch

よく使うタグ

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント115件

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

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

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

2021/06/06リンク

その他

capsxenchromeで印刷してみたら空白の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リンク

その他

TakayukiN627帳票印刷の世界では SVF というサービスが有名

開発

2025/09/30リンク

その他

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

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リンク

その他

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

2021/06/07リンク

その他

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

帳票

2021/06/07リンク

その他

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

2021/06/07リンク

その他

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

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

ビジネス

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

2021/06/06リンク

その他

toaruRむかーし、FDFでやった

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

帳票 Figma XD

2021/06/06リンク

その他

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

2021/06/06リンク

その他

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

デザイン

2021/06/06リンク

その他

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

2021/06/06リンク

その他

コメントするにはログインが必要ですログインしてコメント

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

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

プレビュー

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

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

usersに達しました！

さんが1番目にブックマークした記事「ついに、Webアプリ...」が注目されています。

気持ちをシェアしよう

ツイートする

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

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