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
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
47
27k
データベース/SQL超入門!完全初心者向けに世界一分かりやすく解説します
ttskch
1
4.2k
Symfony UX Autocompleteとかいう 顧客が本当に必要だったもの
ttskch
0
1.7k
就活生あるいは新人エンジニアさんへのお節介なアドバイス
ttskch
0
1.5k
symfony/pantherでWordleを解いてみた
ttskch
0
250
phpenvやめました🤦♂️
ttskch
0
1.2k
PHPでCSVのインポート/エクスポートに立ち向かう
ttskch
1
2.1k
phpenv on Mac 難しすぎワロタ
ttskch
0
540
1.5流エンジニアの生存戦略
ttskch
12
10k
Other Decks in Programming
See All in Programming
Unlocking Python's Core Magic
leew
0
100
PHPを書く理由、PHPを書いていて良い理由 / Reasons to write PHP and why it is good to write PHP
seike460
PRO
5
270
Интеграционное тестирование: как приручить хаос
mariyasaygina
0
460
DjangoNinjaで高速なAPI開発を実現する
masaya00
0
420
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
120
Flutterアプリを生成AIで生成する勘所
rizumita
0
240
Go製CLIツールGatling Commanderによる負荷試験実施の自動化
okmtz
3
630
Re:PandasAI:生成AIがデータ分析業務にもたらすパラダイムシフト【増補改訂版】
negi111111
1
630
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
1
770
WEBアプリケーションにおけるAWS Lambdaを用いた大規模な非同期処理の実践
delhi09
PRO
7
3.5k
ビット演算の話 / Let's play with bit operations
kaityo256
PRO
3
140
NANIMACHI
naokiito
0
920
Featured
See All Featured
The Language of Interfaces
destraynor
154
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Designing for Performance
lara
604
68k
Atom: Resistance is Futile
akmur
261
25k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Clear Off the Table
cherdarchuk
91
320k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
3
87
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
RailsConf 2023
tenderlove
28
830
Building Your Own Lightsaber
phodgson
101
6k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
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!