Slide 1
Slide 1 text
/
72
1
Web
💡
2
021
/
09
/
2 4
#phpcon
2
0
2 1
#phpstudy @ttskch
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
/
72
( ) CTO
2 60 5000 27 💪
Symfony
2
Web
CTO
Zenn Symfony Angular
3
@ttskch
2012
/
0 1
2015
/
1 2
2020
/
0 4
Slide 4
Slide 4 text
/
72
1
. HTML/CSS PDF
2
. Excel LibreO
ff
i
ce PDF
3
. SVF
4
🔖
Slide 5
Slide 5 text
/
72
1
. HTML/CSS PDF
2
. Excel LibreO
ff
i
ce PDF
3
. SVF
5
🔖
Slide 6
Slide 6 text
/
72
6
10
PDF
Slide 7
Slide 7 text
/
72
7
10
PDF
HTML PDF
HTML 10 α
Slide 8
Slide 8 text
/
72
8
10
PDF
Slide 9
Slide 9 text
/
72
9
10
PDF
Slide 10
Slide 10 text
/
72
10
😇
Slide 11
Slide 11 text
/
72
PDF
HTML PDF
⾒
1
11
Slide 12
Slide 12 text
/
72
1
. HTML/CSS PDF
2
. Excel LibreO
ff
i
ce PDF
3
. SVF
12
🔖
Slide 13
Slide 13 text
https://qiita.com/cognitom/items/d
39
d
5
f
1
9 054
c
8
c
8
fd
5 9
2
Slide 14
Slide 14 text
/
72
14
HTML/CSS
PDF OK
👨💻
Slide 15
Slide 15 text
/
72
15
HTML/CSS
HTML/CSS
A
4
😓
HTML
Slide 16
Slide 16 text
/
72
16
Slide 17
Slide 17 text
HTML
Slide 18
Slide 18 text
HTML
rowspan colspan ⾒
td 🙄
Slide 19
Slide 19 text
/
72
1
19
Slide 20
Slide 20 text
/
72
20
HTML 🤮
Slide 21
Slide 21 text
/
72
1
. HTML/CSS PDF
2
. Excel LibreO
ff i
ce PDF
3
. SVF
21
🔖
Slide 22
Slide 22 text
/
72
22
Excel
HTML/CSS
Excel
🙌
🙌
Slide 23
Slide 23 text
/
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
Slide 24
Slide 24 text
/
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
Slide 25
Slide 25 text
/
72
25
Excel
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
/
72
27
Excel PDF
LibreO
ff i
ce
Mac Linux PDF
Slide 28
Slide 28 text
/
72
28
PDF 😣
Slide 29
Slide 29 text
/
72
1
. HTML/CSS PDF
2
. Excel LibreO
ff
i
ce PDF
3
. SVF
29
🔖
Slide 30
Slide 30 text
/
72
30
Slide 31
Slide 31 text
/
72
31
SVF
https://www.wingarc.com/product/svf/outline/what.html
Slide 32
Slide 32 text
/
72
32
SVF
https://www.wingarc.com/cloud/svfc/price.html
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
/
72
34
😓
தখاۀϚʔέοτͰಛʹແཧ
Slide 35
Slide 35 text
/
72
1
. HTML/CSS PDF
2
. Excel LibreO
ff
i
ce PDF
3
. SVF
35
🔖
Slide 36
Slide 36 text
/
72
36
✅
✅
✅
Slide 37
Slide 37 text
/
72
37
✅
✅
✅
UI SVG
Slide 38
Slide 38 text
/
72
38
1
. Adobe XD Figma
2
. % %
3
. SVG
4
. SVG HTML
5
. CSS
6
. SVG
Slide 39
Slide 39 text
/
72
39
1
. Adobe XD Figma
2
. % %
3
. SVG
4
. SVG HTML
5
. CSS
6
. SVG
Slide 40
Slide 40 text
/
72
UI/UX
👌
Figma SVG
Adobe XD
40
Adobe XD / Figma
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
/
72
43
SVG
https://blog.ttskch.com/web-app-pdf-printing-best-practice/
URL base
64
SVG
id
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
/
72
45
1
. Adobe XD Figma
2
. % %
3
. SVG
4
. SVG HTML
5
. CSS
6
. SVG
Slide 46
Slide 46 text
https://developer.mozilla.org/ja/docs/Web/SVG/Element/svg
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
HTML
👍
Slide 49
Slide 49 text
/
72
A
4
49
CSS
Slide 50
Slide 50 text
/
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;
}
}
}
Slide 51
Slide 51 text
/
72
Adobe XD
51
Slide 52
Slide 52 text
/
72
Adobe XD
52
Slide 53
Slide 53 text
/
72
53
1
. Adobe XD Figma
2
. % %
3
. SVG
4
. SVG HTML
5
. CSS
6
. SVG
Slide 54
Slide 54 text
str_replace()
str_replace() OK
Slide 55
Slide 55 text
/
72
🙌
55
Slide 56
Slide 56 text
/
72
🙌
🤔
🤔
56
Slide 57
Slide 57 text
/
72
🙌
🤔
🤔
57
Slide 58
Slide 58 text
/
72
58
😓
Slide 59
Slide 59 text
/
72
59
https://blog.ttskch.com/web-app-pdf-printing-best-practice/
textLength
😓
⾒ textLength
JS
Slide 60
Slide 60 text
/
72
60
https://blog.ttskch.com/web-app-pdf-printing-best-practice/
text-anchor
X
⾒ ⾒
⾒ X
Slide 61
Slide 61 text
/
72
🙌
🙌
61
Slide 62
Slide 62 text
/
72
🙌
🙌
😓
62
Slide 63
Slide 63 text
/
72
63
https://blog.ttskch.com/web-app-pdf-printing-best-practice/
SVG
😓
1
.
2
. font-size
3
. 1, 2
😓
Slide 64
Slide 64 text
/
72
64
🎉
Slide 65
Slide 65 text
/
72
1
. HTML/CSS PDF
2
. Excel LibreO
ff
i
ce PDF
3
. SVF
65
🔖
Slide 66
Slide 66 text
/
72
👌
👌
66
Slide 67
Slide 67 text
/
72
67
Slide 68
Slide 68 text
/
72
68
🌈
Slide 69
Slide 69 text
https://blog.ttskch.com/web-app-pdf-printing-best-practice/
Slide 70
Slide 70 text
✋
https://svg-paper-example.herokuapp.com/
Slide 71
Slide 71 text
npm 🙌
https://github.com/ttskch/svg-paper
Slide 72
Slide 72 text
/
72
72
@ttskch
Thanks!