$30 off During Our Annual Pro Sale. View Details »

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

Takashi Kanemoto
September 24, 2021
Programming
16
17k

 ついに、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
67
phpenvやめました🤦‍♂️
ttskch
0
370
PHPでCSVのインポート/エクスポートに立ち向かう
ttskch
1
1.3k
phpenv on Mac 難しすぎワロタ
ttskch
0
330
1.5流エンジニアの生存戦略
ttskch
12
9.8k
今日の"どう書く"問題のアルゴリズム例
ttskch
1
900
Angular初心者が1週間でモノ作ってみました
ttskch
0
1k
今日の"どう書く"問題のアルゴリズム例
ttskch
1
270
今日の"どう書く"問題のアルゴリズム例
ttskch
1
330

Other Decks in Programming

See All in Programming
第3回AI王YAMALEXソリューション
takashi1029
0
240
コルーチン〜Androidと非同期処理〜
nyafunta9858
0
100
ビルドツールViteを10分で解説！
akitotsukahara
0
130
なんでもPull Requestにする / Kichijoji.pm 31
utgwkk
1
1.6k
Rails Girls 2022 LT
harunatsujita
0
220
Step Functionsの設計時に知っておいたほうがいいかもしれないこと
pirosikick
0
150
AWS データベースブログの記事 「Amazon DynamoDBによる CQRSイベントストアの構築」 を勝手に読み解く
j5ik2o
0
250
【初心者向け】アウトプットが自分の性格をも変化させた話
lemonmanno39
0
480
Gradioを使って機械学習モデルを一瞬でWebアプリ化
os1ma
0
180
RubyとRailsの何が強いのか
knu
5
6.7k
よくあるケースから学ぶ！AWS で想定外のコスト増につながるような実装や設計
track3jyo
PRO
9
670
やさしく入門するOAuth2.0/easy-entry-oauth
marchin1989
3
470

Featured

See All Featured
A designer walks into a library…
pauljervisheath
197
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
223
49k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.3k
Clear Off the Table
cherdarchuk
79
290k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.7k
Making the Leap to Tech Lead
cromwellryan
114
7.6k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
4
3.9k
We Have a Design System, Now What?
morganepeng
37
5.9k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.1k
Why Our Code Smells
bkeepers
PRO
326
55k
Facilitating Awesome Meetings
lara
33
4.5k

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!