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

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

Takashi Kanemoto
September 24, 2021
Programming
16
18k

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

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

Takashi Kanemoto

September 24, 2021
Tweet

More Decks by Takashi Kanemoto

See All by Takashi Kanemoto
symfony/pantherでWordleを解いてみた
ttskch
0
97
phpenvやめました🤦‍♂️
ttskch
0
430
PHPでCSVのインポート/エクスポートに立ち向かう
ttskch
1
1.4k
phpenv on Mac 難しすぎワロタ
ttskch
0
370
1.5流エンジニアの生存戦略
ttskch
12
9.9k
今日の"どう書く"問題のアルゴリズム例
ttskch
1
950
Angular初心者が1週間でモノ作ってみました
ttskch
0
1.1k
今日の"どう書く"問題のアルゴリズム例
ttskch
1
300
今日の"どう書く"問題のアルゴリズム例
ttskch
1
350

Other Decks in Programming

See All in Programming
SPAでもデータをURLでシェアしたい / Kyoto.js 19
utgwkk
1
130
The Adventure of RedAmber - A data frame library in Ruby
heronshoes
0
220
Make Regexp#match much faster
makenowjust
1
440
Load gem from browser
ledsun
2
480
Swiftにおけるポリモーフィズム実現手段の検討
mot_techtalk
1
160
「無ければ作る」Backlogに欲しい機能を自分で作った話
nsuz
0
150
Architecting For Scale
squer
0
170
AWS CDKとZodを活用したバリデーションパターン集 / validation patterns with cdk and zod
gotok365
3
870
Java 20, 21, オブジェクト指向からデータ指向へ / Java20, 21, Object Oriented to Data Oriented
kishida
10
6.7k
Ruby JIT Hacking Guide / RubyKaigi 2023
k0kubun
0
3.4k
Github CopilotとChatGPTを使って感じた使い分けの糸口 / JavaDo #22
gishi_yama
0
160
フロントエンドエンジニアの友人と“型”で話がすれ違った原因 YUMEMI.grow合同LT会in横浜 @Kaito-Dogi
doggy
1
350

Featured

See All Featured
Optimizing for Happiness
mojombo
366
66k
What's new in Ruby 2.0
geeforr
336
30k
RailsConf 2023
tenderlove
0
89
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
8.3k
Practical Orchestrator
shlominoach
179
9.1k
Why You Should Never Use an ORM
jnunemaker
PRO
49
8.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
How GitHub Uses GitHub to Build GitHub
holman
466
280k
Rails Girls Zürich Keynote
gr2m
89
12k
Pencils Down: Stop Designing & Start Developing
hursman
115
10k
The Mythical Team-Month
searls
211
41k
Build your cross-platform service in a week with App Engine
jlugia
222
17k

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