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
280
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
460
今年書いた技術記事で伸びたやつの自慢と自分の中では力作なのにさっぱり伸びなかったやつの供養 / My Tech Articles 2024
ttskch
2
89
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
47
33k
データベース/SQL超入門!完全初心者向けに世界一分かりやすく解説します
ttskch
1
5k
Symfony UX Autocompleteとかいう 顧客が本当に必要だったもの
ttskch
0
1.9k
就活生あるいは新人エンジニアさんへのお節介なアドバイス
ttskch
0
1.5k
symfony/pantherでWordleを解いてみた
ttskch
0
290
phpenvやめました🤦♂️
ttskch
0
1.6k
Other Decks in Programming
See All in Programming
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
1
200
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
220
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
780
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
130
Immutable ActiveRecord
megane42
0
140
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
150
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
370
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
260
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
仕様変更に耐えるための"今の"DRY原則を考える / Rethinking the "Don't repeat yourself" for resilience to specification changes
mkmk884
0
110
技術を根付かせる / How to make technology take root
kubode
1
250
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Building an army of robots
kneath
303
45k
For a Future-Friendly Web
brad_frost
176
9.5k
Embracing the Ebb and Flow
colly
84
4.6k
How to train your dragon (web standard)
notwaldorf
91
5.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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!