カスタムフィールドのデータを表形式でPDFに書き出す方法 / a-blog cms with pdfmake

a-blog cms Training Camp 2019 Spring 2日目にお話させていただいた内容です。

Transcript

1. ΧελϜϑΟʔϧυͷσʔλΛ
   දܗࣜͰ1%'ʹॻ͖ग़͢ํ๏
2. URL https:/ /suzulabo.com MAIL konatsu@suzulabo.com OHTA KONATSU WEB CREATOR & FRONT END ENGINEER / a-blog cms 3
3. ͓͸ͳ͢͠Δ͜ͱ wࣄྫ঺հ
   wQEGNBLFKTͱ͸
   wBCMPH
   DNTͰQEGNBLFKTΛ࢖͏ʹ͸
   w·ͱΊ
4. ࣄྫ঺հ
5. ࣄྫ঺հ NPO a-blog cms A B Z 
 

6. PDF ࣄྫ঺հ ͕୲౰ͨ͜͠ͱ ࢲ
7. PDF 
 PDF 2 ࣄྫ঺հ ػೳཁ݅
10. 団体情報ガイドブック確認票 登録番号：29 グループ名 さんぷるぐるーぷ サンプルグループ 所管施設 市民活動分野 生涯学習分野 教育、キャリアアップ、レクリエーション、その他（あそび・ス ポーツ） ふりがな　やまだ たろう ふりがな　やまだ たろう 代表者名 （ガイドブックへの情報公開　可） 山田 太郎 連絡先窓口担当者 （ガイドブックへの情報公開　可） 山田 太郎 連絡先 [事務所] 電話　　：000-000-0000 （ガイドブックへの情報公開　可） 携帯電話：000-0000-0000 （ガイドブックへの情報公開　不可） FAX　　：000-000-0000 （ガイドブックへの情報公開　不可） メールアドレス：contact@example.com （ガイドブックへの情報公開　可） 連絡先住所 [代表者] （ガイドブックへの情報公開　不可） 〒　460-0000　愛知県名古屋市中区 活動開始年 会員数 10人 活動日時 毎月第2土曜日 12:00から 活動場所 ベースキャンプ名古屋 会費・入会金 2,000円 活動内容 Webサイト制作の基礎を学べる子ども向けのイベントを開催しています。 代表者・会員のコメントなど サイト制作の楽しさをたくさんの子に知ってもらえるよう活動してまいります。 ホームページアドレス https://example.com 所属団体 WEBで情報公開 公開可 登録番号：29 グループ名 さんぷるぐるーぷ サンプルグループ 所管施設 市民活動分野 生涯学習分野 教育、キャリアアップ、レクリエーション、その他（あそび・ス ポーツ） 活動開始年 会員数 10人 活動日時 毎月第2土曜日 12:00から 活動場所 ベースキャンプ名古屋 会費・入会金 2,000円 活動内容 Webサイト制作の基礎を学べる子ども向けのイベントを開催しています。 代表者・会員のコメントなど サイト制作の楽しさをたくさんの子に知ってもらえるよう活動してまいります。 ホームページアドレス https://example.com 所属団体 代表者名 ふりがな　やまだ たろう 山田 太郎 連絡先窓口担当者 ふりがな　やまだ たろう 山田 太郎 連絡先 [事務所] 電話　　：000-000-0000 携帯電話： FAX　　： メールアドレス：contact@example.com 連絡先住所 [代表者] 〒 ֬ೝ༻ҹ࡮ ΨΠυϒοΫ
11. pdfmake.js (http://pdfmake.org/)
12. QEGNBLFKTͱ͸
13. / PDF QEGNBLFKTͱ͸
14. QEGNBLFKTͱ͸ JavaScript QEGNBLFͷ͍͍ͱ͜Ζᶃ const docDefinition = { content: [{ table: { body : [ ['⾒出し', '⾒出し', '⾒出し'], [{text: '⽂章', bold: true}, '⽂章', '⽂章'] ] } }] }; pdfMake.createPDF(docDefinition).open();
15. QEGNBLFKTͱ͸ (table) (columns) QEGNBLFͷ͍͍ͱ͜Ζᶄ const docDefinition = { content: [{ table: { widths: ['*', 'auto', 100], body : [ ['⽂章', '⽂章', ‘⽂章'] ] } }] }; pdfMake.createPDF(docDefinition).open();
16. QEGNBLFKTͱ͸ rowSpan, colSpan QEGNBLFͷ͍͍ͱ͜Ζᶅ const docDefinition = { content: [{ table: { widths: [100, 100, 100], body : [ [{text:'⽂章', rowSpan: 2}, '⽂章', '⽂章'], ['', {text:'⽂章', colSpan: 2}, ''] ] } }] }; pdfMake.createPDF(docDefinition).open();
17. QEGNBLFKTͱ͸ QEGNBLFͷ͍͍ͱ͜Ζᶆ const docDefinition = { content: [{ table: { widths: [100, 100, 100], body : [ [{text:'⽂章', style: ['sample']}, '⽂章', '⽂章'], ] } }], defaultStyle: {fontSize: 20}, styles: { sample: {color: 'red'} } }; pdfMake.createPDF(docDefinition).open();
18. QEGNBLFKTͱ͸ ͪΐͬͱ࢒೦ͳͱ͜Ζᶃ ‣ playground
19. QEGNBLFKTͱ͸ padding border ( ) ͪΐͬͱ࢒೦ͳͱ͜Ζᶄ layout: { paddingLeft: function (i) { return 8; }, paddingRight: function (i) { return 8; }, paddingTop: function (i) { return 8; }, paddingBottom: function (i) { return 8; }, hLineWidth: function (i) { return 2; }, vLineStyle: function (i) { return {dash: {length: 4, space: 3}}; }, },
20. QEGNBLFKTͱ͸ ͪΐͬͱ࢒೦ͳͱ͜Ζᶅ Roboto ‣ VFS ‣ gulp, php, 3 ‣ VFS 

21. vfs_fonts.js - base
22. QEGNBLFKTͱ͸ base ͪΐͬͱ࢒೦ͳͱ͜Ζᶆ ‣ VFS 
 OK ‣ 
 a-blog cms content: [{ image: 'data:image/jpeg;base64,...encodedContent...', }]
23. BCMPH
    DNTͰ
    QEGNBLFΛ࢖͏ʹ͸
24. BCMPH
    DNTͰQEGNBLFΛ࢖͏ʹ͸ <script src="js/lib/pdfmake.js"></script> <script src="js/lib/vfs_fonts.js"></script> <script> pdfMake.fonts = { Aozora: { normal: 'AozoraMinchoRegular.ttf', bold: 'AozoraMinchoMedium.ttf' } }; const docDefinition = { content: [{ table: { // ⽣成するテーブルの内容 } }], defaultStyle: { font: 'Aozora' } }; pdfMake.createPDF(docDefinition).download(); </script> 
 VFS
25. BCMPH
    DNTͰQEGNBLFΛ࢖͏ʹ͸ a-blog cms script 

26. BCMPH
    DNTͰQEGNBLFΛ࢖͏ʹ͸ <script src="js/lib/pdfmake.js"></script> <script src="js/lib/vfs_fonts.js"></script> <script> pdfMake.fonts = { Aozora: { normal: 'AozoraMinchoRegular.ttf', bold: 'AozoraMinchoMedium.ttf' } }; const docDefinition = { content: [{ table: { // ⽣成するテーブルの内容 } }], defaultStyle: { font: 'Aozora' } }; pdfMake.createPDF(docDefinition).download(); </script>
27. pdfmake JS 
 ... BCMPH
    DNTͰQEGNBLFΛ࢖͏ʹ͸ content: [{ table: { body : [ <!-- BEGIN_MODULE Entry_Field --> [{text: '{hoge}', rowSpan: 2}, '{fuga}'], ['', {text: '{piyo}', bold: true}] <!-- END_MODULE Entry_Field --> ] } }] ???
28. BCMPH
    DNTͰQEGNBLFΛ࢖͏ʹ͸ content: [{ table: { body : [ <!-- BEGIN_MODULE Entry_Field --> [\{text: '{hoge}', rowSpan: 2\}, '{fuga}'], ['', \{text: '{piyo}', bold: true\}] <!-- END_MODULE Entry_Field --> ] } }]
29. BCMPH
    DNTͰQEGNBLFΛ࢖͏ʹ͸ <!-- BEGIN_MODULE Entry_Field --> pdfMake.createPDF(docDefinition).download("{title}_guide.pdf"); <!-- END_MODULE Entry_Field -->
30. ·ͱΊ ͍͍εΫϦϓτΛ͔ͭͬͯɺ
 BCMPH
    DNTΛ΋ͬͱָ͘͠ศརʹʂ
31. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ