[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

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

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

エントリーの編集

loading...

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

タイトルガイドライン

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

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

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

Twitterで共有

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

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

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

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

おすすめタグタグについて

よく使うタグ

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

1090 users zenn.dev/ttskch

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

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

おすすめタグタグについて

よく使うタグ

はてなブックマーク

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

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

ユーザー登録

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

記事へのコメント115

  • 注目コメント
  • 新着コメント
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で試してみようと思う。

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

その他
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でデモサイトみたら2ページ目が空白ページとなってた・・

その他
toaruR
むかーし、FDFでやった

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

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

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

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

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

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

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

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

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

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

その他

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

リンクを埋め込む

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

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

関連記事

usersに達しました!

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

気持ちをシェアしよう

ツイートする

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

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

ブックマークしたユーザー

  • TakayukiN6272025年09月30日 TakayukiN627
  • accelerk2025年06月24日 accelerk
  • nodat2025年06月04日 nodat
  • hotmilkcocoa2025年05月30日 hotmilkcocoa
  • netsinweb2025年05月29日 netsinweb
  • Gantetsu78742025年05月12日 Gantetsu7874
  • racchie2025年04月10日 racchie
  • YAA2024年11月26日 YAA
  • ZAORIKU2024年11月20日 ZAORIKU
  • kanetann2024年08月30日 kanetann
  • ykhpno12024年04月21日 ykhpno1
  • devkiyo2024年04月15日 devkiyo
  • okinaka2024年04月14日 okinaka
  • kanakogi2024年04月01日 kanakogi
  • yysaki2024年01月01日 yysaki
  • emanon0012023年12月07日 emanon001
  • kurikurimaron2023年09月29日 kurikurimaron
  • MochiAuto2023年09月12日 MochiAuto
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /