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
340
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
700
今年書いた技術記事で伸びたやつの自慢と自分の中では力作なのにさっぱり伸びなかったやつの供養 / My Tech Articles 2024
ttskch
2
110
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
47
37k
データベース/SQL超入門!完全初心者向けに世界一分かりやすく解説します
ttskch
1
5.8k
Symfony UX Autocompleteとかいう 顧客が本当に必要だったもの
ttskch
0
2k
就活生あるいは新人エンジニアさんへのお節介なアドバイス
ttskch
0
1.6k
symfony/pantherでWordleを解いてみた
ttskch
0
340
phpenvやめました🤦♂️
ttskch
0
1.8k
Other Decks in Programming
See All in Programming
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
130
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
360
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
300
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.2k
Interface vs Types ~型推論が過多推論~
hirokiomote
1
220
AI Coding Agent Enablement in TypeScript
yukukotani
16
6.5k
抽象データ型について学んだ
ryounasso
0
200
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
370
ドメイン駆動設計とXPで支える子どもの未来 / Domain-Driven Design and XP Supporting Children's Future
nrslib
0
350
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
750
iOSアプリ開発もLLMで自動運転する
hiragram
6
2k
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
180
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Producing Creativity
orderedlist
PRO
346
40k
Typedesign – Prime Four
hannesfritz
41
2.6k
Into the Great Unknown - MozCon
thekraken
38
1.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Fireside Chat
paigeccino
37
3.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
650
Agile that works and the tools we love
rasmusluckow
329
21k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
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!