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 full-size slide

  2. /
    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 full-size slide

  3. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff
    i
    ce PDF


    3
    . SVF




    4
    🔖

    View full-size slide

  4. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff
    i
    ce PDF


    3
    . SVF




    5
    🔖

    View full-size slide

  5. /
    72
    7
    10


    PDF
    HTML PDF


    HTML 10 α

    View full-size slide

  6. /
    72
    PDF


    HTML PDF





    1
    11

    View full-size slide

  7. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff
    i
    ce PDF


    3
    . SVF




    12
    🔖

    View full-size slide

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

    View full-size slide

  9. /
    72
    14
    HTML/CSS


    PDF OK


    👨💻

    View full-size slide

  10. /
    72
    15
    HTML/CSS



    HTML/CSS


    A
    4 


    😓

    HTML

    View full-size slide



































































































































  11. HTML
    rowspan colspan ⾒


    td 🙄


    View full-size slide

  12. /
    72
    1


    19 





































    colspan="3">






































    colspan="2">


























































































    colspan="3">






































    colspan="2">


























































































    colspan="3">






































    colspan="2">




























































































    colspan="3">








































    colspan="2">






















































    View full-size slide

  13. /
    72
    20
    HTML 🤮


    View full-size slide

  14. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff i
    ce PDF


    3
    . SVF




    21
    🔖

    View full-size slide

  15. /
    72
    22
    Excel
    HTML/CSS

    Excel


    🙌


    🙌

    View full-size slide

  16. /
    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 full-size slide

  17. /
    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 full-size slide

  18. /
    72
    25
    Excel


    View full-size slide

  19. /
    72
    27
    Excel PDF


    LibreO
    ff i
    ce

    Mac Linux PDF

    View full-size slide

  20. /
    72
    28

    PDF 😣

    View full-size slide

  21. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff
    i
    ce PDF


    3
    . SVF




    29
    🔖

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. /
    72
    34

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

    View full-size slide

  25. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff
    i
    ce PDF


    3
    . SVF




    35
    🔖

    View full-size slide

  26. /
    72
    36







    View full-size slide

  27. /
    72
    37







    UI SVG


    View full-size slide

  28. /
    72
    38
    1
    . Adobe XD Figma


    2
    . % %


    3
    . SVG


    4
    . SVG HTML


    5
    . CSS


    6
    . SVG

    View full-size slide

  29. /
    72
    39
    1
    . Adobe XD Figma


    2
    . % %


    3
    . SVG


    4
    . SVG HTML


    5
    . CSS


    6
    . SVG

    View full-size slide

  30. /
    72
    UI/UX


    👌


    Figma SVG


    Adobe XD
    40
    Adobe XD / Figma

    View full-size slide

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

    SVG






    id

    View full-size slide

  32. /
    72
    45
    1
    . Adobe XD Figma


    2
    . % %


    3
    . SVG


    4
    . SVG HTML


    5
    . CSS


    6
    . SVG

    View full-size slide

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

    View full-size slide

  34. /
    72 

    A
    4

    
 

    49
    CSS

    View full-size slide

  35. /
    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 full-size slide

  36. /
    72
    Adobe XD

    51

    View full-size slide

  37. /
    72
    Adobe XD


    52

    View full-size slide

  38. /
    72
    53
    1
    . Adobe XD Figma


    2
    . % %


    3
    . SVG


    4
    . SVG HTML


    5
    . CSS


    6
    . SVG

    View full-size slide

  39. str_replace()
    str_replace() OK

    View full-size slide

  40. /
    72
    🙌


    🤔


    🤔
    56

    View full-size slide

  41. /
    72
    🙌


    🤔


    🤔


    57

    View full-size slide

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


    😓


    ⾒ textLength

    JS

    View full-size slide

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


    X

    ⾒ ⾒


    ⾒ X

    View full-size slide

  44. /
    72
    🙌


    🙌
    61

    View full-size slide

  45. /
    72
    🙌


    🙌


    😓
    62

    View full-size slide

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

    😓


    1
    .


    2
    . font-size


    3
    . 1, 2


    😓

    View full-size slide

  47. /
    72


    1
    . HTML/CSS PDF


    2
    . Excel LibreO
    ff
    i
    ce PDF


    3
    . SVF




    65
    🔖

    View full-size slide

  48. /
    72
    👌


    👌


    66

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  52. /
    72
    72
    @ttskch
    Thanks!

    View full-size slide