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

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

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

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

Takashi Kanemoto

September 24, 2021
Tweet

More Decks by Takashi Kanemoto

Other Decks in Programming

Transcript

  1. /
    72
    1
    Web



    💡
    2
    021
    /
    09
    /
    2 4
    #phpcon
    2
    0
    2 1
    #phpstudy @ttskch

    View Slide

  2. View Slide

  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

    View Slide

  4. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff
    i
    ce PDF


    3
    . SVF




    4
    🔖

    View Slide

  5. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff
    i
    ce PDF


    3
    . SVF




    5
    🔖

    View Slide

  6. /
    72
    6
    10


    PDF

    View Slide

  7. /
    72
    7
    10


    PDF
    HTML PDF


    HTML 10 α

    View Slide

  8. /
    72
    8
    10


    PDF

    View Slide

  9. /
    72
    9
    10


    PDF

    View Slide

  10. /
    72
    10

    😇

    View Slide

  11. /
    72
    PDF


    HTML PDF





    1
    11

    View Slide

  12. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff
    i
    ce PDF


    3
    . SVF




    12
    🔖

    View Slide

  13. https://qiita.com/cognitom/items/d
    39
    d
    5
    f
    1
    9 054
    c
    8
    c
    8
    fd
    5 9
    2

    View Slide

  14. /
    72
    14
    HTML/CSS


    PDF OK


    👨💻

    View Slide

  15. /
    72
    15
    HTML/CSS



    HTML/CSS


    A
    4 


    😓

    HTML

    View Slide

  16. /
    72
    16

    View Slide



































































































































  17. HTML

    View Slide



































































































































  18. HTML
    rowspan colspan ⾒


    td 🙄


    View Slide

  19. /
    72
    1


    19 





































    colspan="3">






































    colspan="2">


























































































    colspan="3">






































    colspan="2">


























































































    colspan="3">






































    colspan="2">




























































































    colspan="3">








































    colspan="2">






















































    View Slide

  20. /
    72
    20
    HTML 🤮


    View Slide

  21. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff i
    ce PDF


    3
    . SVF




    21
    🔖

    View Slide

  22. /
    72
    22
    Excel
    HTML/CSS

    Excel


    🙌


    🙌

    View Slide

  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

    View Slide

  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

    View Slide

  25. /
    72
    25
    Excel


    View Slide

  26. View Slide

  27. /
    72
    27
    Excel PDF


    LibreO
    ff i
    ce

    Mac Linux PDF

    View Slide

  28. /
    72
    28

    PDF 😣

    View Slide

  29. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff
    i
    ce PDF


    3
    . SVF




    29
    🔖

    View Slide

  30. /
    72
    30

    View Slide

  31. /
    72
    31
    SVF
    https://www.wingarc.com/product/svf/outline/what.html

    View Slide

  32. /
    72
    32
    SVF
    https://www.wingarc.com/cloud/svfc/price.html

    View Slide

  33. View Slide

  34. /
    72
    34

    😓
    தখاۀϚʔέοτͰ͸ಛʹແཧ

    View Slide

  35. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff
    i
    ce PDF


    3
    . SVF




    35
    🔖

    View Slide

  36. /
    72
    36







    View Slide

  37. /
    72
    37







    UI SVG


    View Slide

  38. /
    72
    38
    1
    . Adobe XD Figma


    2
    . % %


    3
    . SVG


    4
    . SVG HTML


    5
    . CSS


    6
    . SVG

    View Slide

  39. /
    72
    39
    1
    . Adobe XD Figma


    2
    . % %


    3
    . SVG


    4
    . SVG HTML


    5
    . CSS


    6
    . SVG

    View Slide

  40. /
    72
    UI/UX


    👌


    Figma SVG


    Adobe XD
    40
    Adobe XD / Figma

    View Slide

  41. View Slide

  42. View Slide

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

    SVG






    id

    View Slide

  44. View Slide

  45. /
    72
    45
    1
    . Adobe XD Figma


    2
    . % %


    3
    . SVG


    4
    . SVG HTML


    5
    . CSS


    6
    . SVG

    View Slide

  46. https://developer.mozilla.org/ja/docs/Web/SVG/Element/svg

    View Slide

  47. View Slide

  48. HTML


    👍

    View Slide

  49. /
    72 

    A
    4

    
 

    49
    CSS

    View Slide

  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;


    }


    }


    }

    View Slide

  51. /
    72
    Adobe XD

    51

    View Slide

  52. /
    72
    Adobe XD


    52

    View Slide

  53. /
    72
    53
    1
    . Adobe XD Figma


    2
    . % %


    3
    . SVG


    4
    . SVG HTML


    5
    . CSS


    6
    . SVG

    View Slide

  54. str_replace()
    str_replace() OK

    View Slide

  55. /
    72
    🙌
    55

    View Slide

  56. /
    72
    🙌


    🤔


    🤔
    56

    View Slide

  57. /
    72
    🙌


    🤔


    🤔


    57

    View Slide

  58. /
    72
    58

    😓

    View Slide

  59. /
    72
    59
    https://blog.ttskch.com/web-app-pdf-printing-best-practice/
    textLength


    😓


    ⾒ textLength

    JS

    View Slide

  60. /
    72
    60
    https://blog.ttskch.com/web-app-pdf-printing-best-practice/
    text-anchor


    X

    ⾒ ⾒


    ⾒ X

    View Slide

  61. /
    72
    🙌


    🙌
    61

    View Slide

  62. /
    72
    🙌


    🙌


    😓
    62

    View Slide

  63. /
    72
    63
    https://blog.ttskch.com/web-app-pdf-printing-best-practice/
    SVG

    😓


    1
    .


    2
    . font-size


    3
    . 1, 2


    😓

    View Slide

  64. /
    72
    64
    🎉

    View Slide

  65. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff
    i
    ce PDF


    3
    . SVF




    65
    🔖

    View Slide

  66. /
    72
    👌


    👌


    66

    View Slide

  67. /
    72
    67

    View Slide

  68. /
    72
    68
    🌈

    View Slide

  69. https://blog.ttskch.com/web-app-pdf-printing-best-practice/

    View Slide


  70. https://svg-paper-example.herokuapp.com/

    View Slide

  71. npm 🙌
    https://github.com/ttskch/svg-paper

    View Slide

  72. /
    72
    72
    @ttskch
    Thanks!

    View Slide