Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
カスタムフィールドのデータを表形式でPDFに書き出す方法 / a-blog cms with pdfmake
Search
Ohta Konatsu
May 18, 2019
Programming
0
150
カスタムフィールドのデータを表形式でPDFに書き出す方法 / a-blog cms with pdfmake
a-blog cms Training Camp 2019 Spring 2日目にお話させていただいた内容です。
Ohta Konatsu
May 18, 2019
Tweet
Share
More Decks by Ohta Konatsu
See All by Ohta Konatsu
テンプレートの変更を減らすために心がけていること
flour621
0
55
「ここのアニメーション、おまかせで!」と言われたら / What is important for css animation
flour621
0
27
Other Decks in Programming
See All in Programming
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
180
htmx is fun!
codehex
2
190
object-oriented-conference-2024
fuwasegu
6
2k
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
120
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
15
2.9k
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
140
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
840
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
140
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
850
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
770
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
28
12k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Docker and Python
trallard
33
2.6k
Automating Front-end Workflow
addyosmani
1353
200k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
Being A Developer After 40
akosma
56
580k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
The Invisible Side of Design
smashingmag
293
49k
RailsConf 2023
tenderlove
0
510
Practical Orchestrator
shlominoach
180
9.7k
Transcript
ΧελϜϑΟʔϧυͷσʔλΛ දܗࣜͰ1%'ʹॻ͖ग़͢ํ๏
URL https:/ /suzulabo.com MAIL
[email protected]
OHTA KONATSU WEB CREATOR &
FRONT END ENGINEER / a-blog cms 3
͓ͳ͢͠Δ͜ͱ wࣄྫհ wQEGNBLFKTͱ wBCMPHDNTͰQEGNBLFKTΛ͏ʹ w·ͱΊ
ࣄྫհ
ࣄྫհ NPO a-blog cms A B Z
PDF ࣄྫհ ͕୲ͨ͜͠ͱ ࢲ
PDF PDF 2 ࣄྫհ ػೳཁ݅
None
None
団体情報ガイドブック確認票 登録番号:29 グループ名 さんぷるぐるーぷ サンプルグループ 所管施設 市民活動分野 生涯学習分野 教育、キャリアアップ、レクリエーション、その他(あそび・ス ポーツ)
ふりがな やまだ たろう ふりがな やまだ たろう 代表者名 (ガイドブックへの情報公開 可) 山田 太郎 連絡先窓口担当者 (ガイドブックへの情報公開 可) 山田 太郎 連絡先 [事務所] 電話 :000-000-0000 (ガイドブックへの情報公開 可) 携帯電話:000-0000-0000 (ガイドブックへの情報公開 不可) FAX :000-000-0000 (ガイドブックへの情報公開 不可) メールアドレス:
[email protected]
(ガイドブックへの情報公開 可) 連絡先住所 [代表者] (ガイドブックへの情報公開 不可) 〒 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 : メールアドレス:
[email protected]
連絡先住所 [代表者] 〒 ֬ೝ༻ҹ ΨΠυϒοΫ
pdfmake.js (http://pdfmake.org/)
QEGNBLFKTͱ
/ PDF QEGNBLFKTͱ
QEGNBLFKTͱ JavaScript QEGNBLFͷ͍͍ͱ͜Ζᶃ const docDefinition = { content: [{ table:
{ body : [ ['⾒出し', '⾒出し', '⾒出し'], [{text: '⽂章', bold: true}, '⽂章', '⽂章'] ] } }] }; pdfMake.createPDF(docDefinition).open();
QEGNBLFKTͱ (table) (columns) QEGNBLFͷ͍͍ͱ͜Ζᶄ const docDefinition = { content: [{
table: { widths: ['*', 'auto', 100], body : [ ['⽂章', '⽂章', ‘⽂章'] ] } }] }; pdfMake.createPDF(docDefinition).open();
QEGNBLFKTͱ rowSpan, colSpan QEGNBLFͷ͍͍ͱ͜Ζᶅ const docDefinition = { content: [{
table: { widths: [100, 100, 100], body : [ [{text:'⽂章', rowSpan: 2}, '⽂章', '⽂章'], ['', {text:'⽂章', colSpan: 2}, ''] ] } }] }; pdfMake.createPDF(docDefinition).open();
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();
QEGNBLFKTͱ ͪΐͬͱ೦ͳͱ͜Ζᶃ ‣ playground
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}}; }, },
QEGNBLFKTͱ ͪΐͬͱ೦ͳͱ͜Ζᶅ Roboto ‣ VFS ‣ gulp, php, 3 ‣
VFS
vfs_fonts.js - base
QEGNBLFKTͱ base ͪΐͬͱ೦ͳͱ͜Ζᶆ ‣ VFS OK ‣ a-blog
cms content: [{ image: 'data:image/jpeg;base64,...encodedContent...', }]
BCMPHDNTͰ QEGNBLFΛ͏ʹ
BCMPHDNTͰ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
BCMPHDNTͰQEGNBLFΛ͏ʹ a-blog cms script
BCMPHDNTͰ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>
pdfmake JS ... BCMPHDNTͰQEGNBLFΛ͏ʹ content: [{ table: { body
: [ <!-- BEGIN_MODULE Entry_Field --> [{text: '{hoge}', rowSpan: 2}, '{fuga}'], ['', {text: '{piyo}', bold: true}] <!-- END_MODULE Entry_Field --> ] } }] ???
BCMPHDNTͰQEGNBLFΛ͏ʹ content: [{ table: { body : [ <!-- BEGIN_MODULE
Entry_Field --> [\{text: '{hoge}', rowSpan: 2\}, '{fuga}'], ['', \{text: '{piyo}', bold: true\}] <!-- END_MODULE Entry_Field --> ] } }]
BCMPHDNTͰQEGNBLFΛ͏ʹ <!-- BEGIN_MODULE Entry_Field --> pdfMake.createPDF(docDefinition).download("{title}_guide.pdf"); <!-- END_MODULE Entry_Field -->
·ͱΊ ͍͍εΫϦϓτΛ͔ͭͬͯɺ BCMPHDNTΛͬͱָ͘͠ศརʹʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ