ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡

PHPカンファレンス 2021 1週間前イベント 〜 帰ってきたPHP勉強会@東京 の発表資料です。
https://phpcon.connpass.com/event/224128/

Transcript

1. / 72 1 Web 💡 2 021 / 09 / 2 4 #phpcon 2 0 2 1 #phpstudy @ttskch
3. / 72 ( ) CTO 2 60 5000 27 💪 Symfony 2 Web CTO Zenn Symfony Angular 3 @ttskch 2012 / 0 1 2015 / 1 2 2020 / 0 4
4. / 72 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . SVF 4 🔖
5. / 72 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . SVF 5 🔖
6. / 72 6 10 PDF
7. / 72 7 10 PDF HTML PDF HTML 10 α
8. / 72 8 10 PDF
9. / 72 9 10 PDF
10. / 72 10 😇
11. / 72 PDF HTML PDF ⾒ 1 11
12. / 72 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . SVF 12 🔖
13. https://qiita.com/cognitom/items/d 39 d 5 f 1 9 054 c 8 c 8 fd 5 9 2
14. / 72 14 HTML/CSS PDF OK 👨💻
15. / 72 15 HTML/CSS 
 HTML/CSS A 4 
 😓 
 HTML
16. / 72 16
17. <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
18. <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 🙄
19. / 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>
20. / 72 20 HTML 🤮
21. / 72 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . SVF 21 🔖
22. / 72 22 Excel HTML/CSS 
 Excel 🙌 🙌 

23. / 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
24. / 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
25. / 72 25 Excel 

27. / 72 27 Excel PDF LibreO ff i ce 
 Mac Linux PDF 

28. / 72 28 PDF 😣
29. / 72 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . SVF 29 🔖
30. / 72 30
31. / 72 31 SVF https://www.wingarc.com/product/svf/outline/what.html
32. / 72 32 SVF https://www.wingarc.com/cloud/svfc/price.html
34. / 72 34 😓 தখاۀϚʔέοτͰ͸ಛʹແཧ
35. / 72 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . SVF 35 🔖
36. / 72 36 ✅ ✅ ✅
37. / 72 37 ✅ ✅ ✅ UI SVG
38. / 72 38 1 . Adobe XD Figma 2 . % % 3 . SVG 4 . SVG HTML <svg> 5 . CSS 6 . SVG
39. / 72 39 1 . Adobe XD Figma 2 . % % 3 . SVG 4 . SVG HTML <svg> 5 . CSS 6 . SVG
40. / 72 UI/UX 👌 Figma SVG 
 
 Adobe XD 40 Adobe XD / Figma
43. / 72 43 SVG https://blog.ttskch.com/web-app-pdf-printing-best-practice/ URL base 64 
 SVG <path> <text> 
 <text> id 

45. / 72 45 1 . Adobe XD Figma 2 . % % 3 . SVG 4 . SVG HTML <svg> 5 . CSS 6 . SVG
46. https://developer.mozilla.org/ja/docs/Web/SVG/Element/svg <svg>
48. HTML 👍
49. / 72 
 A 4 
 
 49 CSS
50. / 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; } } }
51. / 72 Adobe XD 
 51
52. / 72 Adobe XD 
 52
53. / 72 53 1 . Adobe XD Figma 2 . % % 3 . SVG 4 . SVG HTML <svg> 5 . CSS 6 . SVG
54. str_replace() str_replace() OK
55. / 72 🙌 55
56. / 72 🙌 🤔 🤔 56
57. / 72 🙌 🤔 🤔 57
58. / 72 58 😓
59. / 72 59 https://blog.ttskch.com/web-app-pdf-printing-best-practice/ <text> textLength 😓 ⾒ textLength 
 JS
60. / 72 60 https://blog.ttskch.com/web-app-pdf-printing-best-practice/ <text> text-anchor <text> X 
 ⾒ ⾒ ⾒ X
61. / 72 🙌 🙌 61
62. / 72 🙌 🙌 😓 62
63. / 72 63 https://blog.ttskch.com/web-app-pdf-printing-best-practice/ SVG <text> 
 😓 1 . 2 . font-size 3 . 1, 2 😓
64. / 72 64 🎉
65. / 72 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . SVF 65 🔖
66. / 72 👌 👌 
 66
67. / 72 67
68. / 72 68 🌈
69. https://blog.ttskch.com/web-app-pdf-printing-best-practice/
70. ✋ https://svg-paper-example.herokuapp.com/
71. npm 🙌 https://github.com/ttskch/svg-paper
72. / 72 72 @ttskch Thanks!