Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

8e844e43f029ec38e206a464cf4587b3?s=47 Takashi Kanemoto
September 24, 2021
Programming
14
16k

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

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

8e844e43f029ec38e206a464cf4587b3?s=128

Takashi Kanemoto

September 24, 2021
Tweet

More Decks by Takashi Kanemoto

See All by Takashi Kanemoto
phpenvやめました🤦‍♂️
8e844e43f029ec38e206a464cf4587b3?s=48 ttskch
0
310
PHPでCSVのインポート/エクスポートに立ち向かう
8e844e43f029ec38e206a464cf4587b3?s=48 ttskch
1
1.2k
phpenv on Mac 難しすぎワロタ
8e844e43f029ec38e206a464cf4587b3?s=48 ttskch
0
280
1.5流エンジニアの生存戦略
8e844e43f029ec38e206a464cf4587b3?s=48 ttskch
12
9.6k
今日の"どう書く"問題のアルゴリズム例
8e844e43f029ec38e206a464cf4587b3?s=48 ttskch
1
790
Angular初心者が1週間でモノ作ってみました
8e844e43f029ec38e206a464cf4587b3?s=48 ttskch
0
920
今日の"どう書く"問題のアルゴリズム例
8e844e43f029ec38e206a464cf4587b3?s=48 ttskch
1
230
今日の"どう書く"問題のアルゴリズム例
8e844e43f029ec38e206a464cf4587b3?s=48 ttskch
1
290
1.5流エンジニアの生存戦略
8e844e43f029ec38e206a464cf4587b3?s=48 ttskch
0
340

Other Decks in Programming

See All in Programming
Jetpack DataStore
Ac5b39a4b12e8ca2d6e25b9e7cc142ae?s=48 djain2405
1
170
New Relicを使った Observabilityの実現方法と活用例 / gocon 2022 spring after talk
Eb6be531bcfaa99714d8d3b48665a5a9?s=48 budougumi0617
0
770
Node.js 最新動向 TFCon 2022
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
4
2.3k
From Java 11 to 17 and beyond
F784a8de872a5d98f67ac5ccbd6683d0?s=48 josepaumard
0
280
Git Rebase
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
7
1k
roadmap to rust 2024
F0493f5bcb4cc9fdccc54ae3e8ab6bd0?s=48 matsu7874
1
350
Where and how to run UI tests (Droidcon London, 2021)
E20836b1ea89956e0b96362046e2b564?s=48 nonews
0
200
質とスピード（2022春版、質疑応答用資料付き） / Quality and Speed 2022 Spring Edition
9f3a83db74bee75a64b5e6ed106a775c?s=48 twada
PRO
27
16k
よりUXに近いSLI・SLOの運用による可用性の再設計
953d2907b80dd5955c561d695ea9a494?s=48 kazumanagano
2
370
Yumemi.apk #6 ～ゆめみのAndroidエンジニア 日頃の成果大発表会！～ Session 2
7e5089310d68eca7e2ad404a1c8f2292?s=48 blendthink
1
200
Go で始める将棋 AI
09923d8b0c79423a289b7d5dc31a59e4?s=48 mururu
1
120
microCMS × imgixを活用して品質とレスポンスを両立したポートフォリオサイトを作成した話
777d99f6f7f0807fd423b7acb12b53fe?s=48 takehitogoto
0
370

Featured

See All Featured
How New CSS Is Changing Everything About Graphic Design on the Web
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
212
11k
How to name files
0a4f62e90c976eeb44d33add75cca5af?s=48 jennybc
39
58k
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
120k
Testing 201, or: Great Expectations
A9704266587836f7e784235e5073b93e?s=48 jmmastey
21
5.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
900
Music & Morning Musume
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4.1k
From Idea to $5000 a Month in 5 Months
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
44k
The Cult of Friendly URLs
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.7k
Why You Should Never Use an ORM
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
47
5.5k
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.6k
Rebuilding a faster, lazier Slack
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7.2k
Fashionably flexible responsive web design (full day workshop)
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
62k

Transcript

  1. / 72 1 Web 💡 2 021 / 09 /

    2 4 #phpcon 2 0 2 1 #phpstudy @ttskch
  2. None

  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 


  26. None

  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

  33. None

  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
  41. None
  42. None

  43. / 72 43 SVG https://blog.ttskch.com/web-app-pdf-printing-best-practice/ URL base 64 
 SVG

    <path> <text> 
 <text> id 

  44. None

  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>

  47. None

  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!