Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡
Search
Takashi Kanemoto
September 24, 2021
Programming
16
19k
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡
PHPカンファレンス 2021 1週間前イベント 〜 帰ってきたPHP勉強会@東京
の発表資料です。
https://phpcon.connpass.com/event/224128/
Takashi Kanemoto
September 24, 2021
Tweet
Share
More Decks by Takashi Kanemoto
See All by Takashi Kanemoto
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
310
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
550
今年書いた技術記事で伸びたやつの自慢と自分の中では力作なのにさっぱり伸びなかったやつの供養 / My Tech Articles 2024
ttskch
2
99
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
47
34k
データベース/SQL超入門!完全初心者向けに世界一分かりやすく解説します
ttskch
1
5.3k
Symfony UX Autocompleteとかいう 顧客が本当に必要だったもの
ttskch
0
1.9k
就活生あるいは新人エンジニアさんへのお節介なアドバイス
ttskch
0
1.5k
symfony/pantherでWordleを解いてみた
ttskch
0
310
phpenvやめました🤦♂️
ttskch
0
1.7k
Other Decks in Programming
See All in Programming
Return of the Full-Stack Developer
simas
PRO
1
310
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
120
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
530
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
820
신입 안드로이드 개발자의 AI 스타트업 생존기 (+ Native C++ Code를 Android에서 사용해보기)
dygames
0
500
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
200
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
6
3k
Go1.24 go vetとtestsアナライザ
kuro_kurorrr
2
470
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
150
AI時代のプログラミング教育 / programming education in ai era
kishida
23
20k
goにおける コネクションプールの仕組み を軽く掘って見た
aronokuyama
0
140
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
130
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
How STYLIGHT went responsive
nonsquared
99
5.4k
Building Your Own Lightsaber
phodgson
104
6.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Why Our Code Smells
bkeepers
PRO
336
57k
It's Worth the Effort
3n
184
28k
Writing Fast Ruby
sferik
628
61k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How to train your dragon (web standard)
notwaldorf
91
5.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
Transcript
/ 72 1 Web 💡 2 021 / 09 /
2 4 #phpcon 2 0 2 1 #phpstudy @ttskch
None
/ 72 ( ) CTO 2 60 5000 27 💪
Symfony 2 Web CTO Zenn Symfony Angular 3 @ttskch 2012 / 0 1 2015 / 1 2 2020 / 0 4
/ 72 1 . HTML/CSS PDF 2 . Excel LibreO
ff i ce PDF 3 . SVF 4 🔖
/ 72 1 . HTML/CSS PDF 2 . Excel LibreO
ff i ce PDF 3 . SVF 5 🔖
/ 72 6 10 PDF
/ 72 7 10 PDF HTML PDF HTML 10 α
/ 72 8 10 PDF
/ 72 9 10 PDF
/ 72 10 😇
/ 72 PDF HTML PDF ⾒ 1 11
/ 72 1 . HTML/CSS PDF 2 . Excel LibreO
ff i ce PDF 3 . SVF 12 🔖
https://qiita.com/cognitom/items/d 39 d 5 f 1 9 054 c 8
c 8 fd 5 9 2
/ 72 14 HTML/CSS PDF OK 👨💻
/ 72 15 HTML/CSS HTML/CSS A 4 😓
HTML
/ 72 16
<table> <tr> <td colspan="4"></td> <th></th> <td></td> </tr> <tr> <th rowspan="3"></th>
<td colspan="3"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2" colspan="3"></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <th rowspan="5"></th> <td colspan="2"></td> <td rowspan="4"></td> <th></th> <td></td> </tr> <tr> <td rowspan="3" colspan="2"></td> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <td></td> <td colspan="2"></td> <th></th> <td></td> </tr> </table> HTML
<table> <tr> <td colspan="4"></td> <th></th> <td></td> </tr> <tr> <th rowspan="3"></th>
<td colspan="3"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2" colspan="3"></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <th rowspan="5"></th> <td colspan="2"></td> <td rowspan="4"></td> <th></th> <td></td> </tr> <tr> <td rowspan="3" colspan="2"></td> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <td></td> <td colspan="2"></td> <th></th> <td></td> </tr> </table> HTML rowspan colspan ⾒ td 🙄
/ 72 1 19 <table> <tr> <td colspan="4"></td>
<th></th> <td></td> </tr> <tr> <th rowspan="3"></th> <td colspan="3"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2" colspan="3"></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <th rowspan="5"></th> <td colspan="2"></td> <td rowspan="4"></td> <th></th> <td></td> </tr> <tr> <td rowspan="3" colspan="2"></td> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <td></td> <td colspan="2"></td> <th></th> <td></td> </tr> </table> <table> <tr> <td colspan="4"></td> <th></th> <td></td> </tr> <tr> <th rowspan="3"></th> <td colspan="3"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2" colspan="3"></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <th rowspan="5"></th> <td colspan="2"></td> <td rowspan="4"></td> <th></th> <td></td> </tr> <tr> <td rowspan="3" colspan="2"></td> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <td></td> <td colspan="2"></td> <th></th> <td></td> </tr> </table> <table> <tr> <td colspan="4"></td> <th></th> <td></td> </tr> <tr> <th rowspan="3"></th> <td colspan="3"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2" colspan="3"></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <th rowspan="5"></th> <td colspan="2"></td> <td rowspan="4"></td> <th></th> <td></td> </tr> <tr> <td rowspan="3" colspan="2"></td> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <td></td> <td colspan="2"></td> <th></th> <td></td> </tr> </table> <table> <tr> <td colspan="4"></td> <th></th> <td></td> </tr> <tr> <th rowspan="3"></th> <td colspan="3"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2" colspan="3"></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <th rowspan="5"></th> <td colspan="2"></td> <td rowspan="4"></td> <th></th> <td></td> </tr> <tr> <td rowspan="3" colspan="2"></td> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <td></td> <td colspan="2"></td> <th></th> <td></td> </tr> </table>
/ 72 20 HTML 🤮
/ 72 1 . HTML/CSS PDF 2 . Excel LibreO
ff i ce PDF 3 . SVF 21 🔖
/ 72 22 Excel HTML/CSS Excel 🙌 🙌
/ 72 23 PDF LibreO ffi ce OpenO ff i
ce OSS CLI Excel PDF https://qiita.com/hirohiro 77 /items/ 942 eb 46 1 e 8 f 47 27 e 4 b 38
/ 72 24 PDF LibreO ffi ce OpenO ff i
ce OSS CLI Excel PDF https://qiita.com/hirohiro 77 /items/ 942 eb 46 1 e 8 f 47 27 e 4 b 38
/ 72 25 Excel
None
/ 72 27 Excel PDF LibreO ff i ce
Mac Linux PDF
/ 72 28 PDF 😣
/ 72 1 . HTML/CSS PDF 2 . Excel LibreO
ff i ce PDF 3 . SVF 29 🔖
/ 72 30
/ 72 31 SVF https://www.wingarc.com/product/svf/outline/what.html
/ 72 32 SVF https://www.wingarc.com/cloud/svfc/price.html
None
/ 72 34 😓 தখاۀϚʔέοτͰಛʹແཧ
/ 72 1 . HTML/CSS PDF 2 . Excel LibreO
ff i ce PDF 3 . SVF 35 🔖
/ 72 36 ✅ ✅ ✅
/ 72 37 ✅ ✅ ✅ UI SVG
/ 72 38 1 . Adobe XD Figma 2 .
% % 3 . SVG 4 . SVG HTML <svg> 5 . CSS 6 . SVG
/ 72 39 1 . Adobe XD Figma 2 .
% % 3 . SVG 4 . SVG HTML <svg> 5 . CSS 6 . SVG
/ 72 UI/UX 👌 Figma SVG Adobe XD
40 Adobe XD / Figma
None
None
/ 72 43 SVG https://blog.ttskch.com/web-app-pdf-printing-best-practice/ URL base 64 SVG
<path> <text> <text> id
None
/ 72 45 1 . Adobe XD Figma 2 .
% % 3 . SVG 4 . SVG HTML <svg> 5 . CSS 6 . SVG
https://developer.mozilla.org/ja/docs/Web/SVG/Element/svg <svg>
None
HTML 👍
/ 72 A 4 49 CSS
/ 72 50 CSS https://blog.ttskch.com/web-app-pdf-printing-best-practice/ @page { size: A4 portrait;
margin: 0; } * { margin: 0; padding: 0; user-select: none; } body { width: 210mm; color-adjust: exact; > svg { width: 210mm; height: 295.5mm; page-break-after: always; } } @media screen { body { background: #ccc; margin: 0 auto; > svg { background: #fff; box-shadow: 0 .5mm 2mm rgba(0,0,0,.3); margin-top: 5mm; } } }
/ 72 Adobe XD 51
/ 72 Adobe XD 52
/ 72 53 1 . Adobe XD Figma 2 .
% % 3 . SVG 4 . SVG HTML <svg> 5 . CSS 6 . SVG
str_replace() str_replace() OK
/ 72 🙌 55
/ 72 🙌 🤔 🤔 56
/ 72 🙌 🤔 🤔 57
/ 72 58 😓
/ 72 59 https://blog.ttskch.com/web-app-pdf-printing-best-practice/ <text> textLength 😓 ⾒ textLength
JS
/ 72 60 https://blog.ttskch.com/web-app-pdf-printing-best-practice/ <text> text-anchor <text> X ⾒
⾒ ⾒ X
/ 72 🙌 🙌 61
/ 72 🙌 🙌 😓 62
/ 72 63 https://blog.ttskch.com/web-app-pdf-printing-best-practice/ SVG <text> 😓 1 .
2 . font-size 3 . 1, 2 😓
/ 72 64 🎉
/ 72 1 . HTML/CSS PDF 2 . Excel LibreO
ff i ce PDF 3 . SVF 65 🔖
/ 72 👌 👌 66
/ 72 67
/ 72 68 🌈
https://blog.ttskch.com/web-app-pdf-printing-best-practice/
✋ https://svg-paper-example.herokuapp.com/
npm 🙌 https://github.com/ttskch/svg-paper
/ 72 72 @ttskch Thanks!