PHPカンファレンス 2021 1週間前イベント 〜 帰ってきたPHP勉強会@東京 の発表資料です。 https://phpcon.connpass.com/event/224128/
/721Web 💡2021/09/2 4#phpcon202 1#phpstudy @ttskch
View Slide
/72( ) CTO2 60 5000 27 💪Symfony2 WebCTOZenn Symfony Angular3@ttskch2012/0 12015/1 22020/0 4
/72 1. HTML/CSS PDF2. Excel LibreOffice PDF3. SVF4🔖
/72 1. HTML/CSS PDF2. Excel LibreOffice PDF3. SVF5🔖
/72610PDF
/72710PDFHTML PDFHTML 10 α
/72810PDF
/72910PDF
/7210 😇
/72PDFHTML PDF⾒111
/72 1. HTML/CSS PDF2. Excel LibreOffice PDF3. SVF12🔖
https://qiita.com/cognitom/items/d39d5f19 054c8c8fd5 92
/7214HTML/CSSPDF OK👨💻
/7215HTML/CSS HTML/CSSA4 😓 HTML
/7216
HTML
HTMLrowspan colspan ⾒td 🙄
/721 19 colspan="3">colspan="2">colspan="3">colspan="2">colspan="3">colspan="2">colspan="3">colspan="2">
/7220HTML 🤮
/72 1. HTML/CSS PDF2. Excel LibreOff ice PDF3. SVF21🔖
/7222ExcelHTML/CSS Excel🙌🙌
/7223PDFLibreOfficeOpenOffice OSSCLI Excel PDFhttps://qiita.com/hirohiro77/items/942eb46 1e8f47 27e4b38
/7224PDFLibreOfficeOpenOffice OSSCLI Excel PDFhttps://qiita.com/hirohiro77/items/942eb46 1e8f47 27e4b38
/7225Excel
/7227Excel PDFLibreOff ice Mac Linux PDF
/7228 PDF 😣
/72 1. HTML/CSS PDF2. Excel LibreOffice PDF3. SVF29🔖
/7230
/7231SVFhttps://www.wingarc.com/product/svf/outline/what.html
/7232SVFhttps://www.wingarc.com/cloud/svfc/price.html
/7234 😓தখاۀϚʔέοτͰಛʹແཧ
/72 1. HTML/CSS PDF2. Excel LibreOffice PDF3. SVF35🔖
/7236✅✅✅
/7237✅✅✅UI SVG
/72381. Adobe XD Figma2. % %3. SVG4. SVG HTML 5. CSS6. SVG
/72391. Adobe XD Figma2. % %3. SVG4. SVG HTML 5. CSS6. SVG
/72UI/UX👌Figma SVG Adobe XD40Adobe XD / Figma
/7243SVGhttps://blog.ttskch.com/web-app-pdf-printing-best-practice/URL base64 SVG id
/72451. Adobe XD Figma2. % %3. SVG4. SVG HTML 5. CSS6. SVG
https://developer.mozilla.org/ja/docs/Web/SVG/Element/svg
HTML👍
/72 A4 49CSS
/7250CSShttps://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;}}}
/72Adobe XD 51
/72Adobe XD 52
/72531. Adobe XD Figma2. % %3. SVG4. SVG HTML 5. CSS6. SVG
str_replace()str_replace() OK
/72🙌55
/72🙌🤔🤔56
/72🙌🤔🤔57
/7258 😓
/7259https://blog.ttskch.com/web-app-pdf-printing-best-practice/ textLength😓⾒ textLength JS
/7260https://blog.ttskch.com/web-app-pdf-printing-best-practice/ text-anchor X ⾒ ⾒⾒ X
/72🙌🙌61
/72🙌🙌😓62
/7263https://blog.ttskch.com/web-app-pdf-printing-best-practice/SVG 😓1.2. font-size3. 1, 2😓
/7264🎉
/72 1. HTML/CSS PDF2. Excel LibreOffice PDF3. SVF65🔖
/72👌👌 66
/7267
/7268🌈
https://blog.ttskch.com/web-app-pdf-printing-best-practice/
✋https://svg-paper-example.herokuapp.com/
npm 🙌https://github.com/ttskch/svg-paper
/7272@ttskchThanks!