《Bubble》PDF出力の実装方法（プラグイン）

Bubble外のwebページをPDF出力する場合

１．プラグインの準備

　① Pluginsタブから「SelectPDF」をインストール。

② 「GET A DEMO LICENSE KEY NOW」からメールアドレス、パスワード、会社名（任意）を送信して License Keyを取得。

③ 先程取得した License Key を入力。

💡「selectPDF」の特徴

▪ 外部webページとBubbleで作成したページのどちらもPDF出力が可能

▪ 同一プロジェクト内であれば出力するページの指定ができるが、要素単体での出力はできない

▪ 7日間、200回お試しで利用可能

２．実装（デザイン）

PDF出力のトリガーになる任意のエレメントを配置。

３．実装（ワークフロー）

① pluginsの「Generate PDF from a web page」を選択。

※各パラメータの設定

　▪ File name : 出力時のファイル名

　▪ URL type : PDF出力ページの選択

　　　　Internal page = Bubble内のページ

　　　　External page = Bubble外のwebページ

　▪ Page : URL type で Internal Page を選択した場合、ここで出力するページを指定できる

　▪ Page size : 出力サイズ

　▪ Page orientation : 出力向きの縦横設定

　　　　landscape = 横

　　　　portrait = 縦

　② Navigationの「Open an external website」でStep1のURLを設定。

➡ ページ上に配置した任意のエレメントをクリックすればPDFが出力表示される。

　Bubble内で作成したページをPDF出力する場合

１．プラグインの準備

Pluginsタブから「Bubble Page To PDF Converter」をインストール。

💡「Bubble Page To PDF Converter」の特徴

▪ Bubbleで作成したページであればページ全体か各要素を抽出もしくは除外してのPDF出力が可能

▪ 利用料金がかかる

２．実装（デザイン）

　作成したページ上に「Converter to PDF ...」とPDF出力のトリガーになる任意のエレメントを配置。

⚠️実装にあたっての注意点

▪ 上記画像では「ConvertertoPDF...」のサイズをわかりやすいように大きくしているが初期値のままで問題ない

　※レイアウトの関係で邪魔になる場合はhiddenにしておく

▪ 「File uploads enabled」は"yes"にする

３．実装（ワークフロー）

Element Actionの「Generate pdf from html server side ConvertertoPDF...」を選択して各パラメータを設定。

➡ ページ上に配置した任意のエレメントをクリックすればPDFが出力表示される。

※各パラメータの設定

　▪ Convert target : PDF出力の範囲選択

　　　　Current Page = ページ全体（Floating Groupを含めるかどうかの選択も可能）

　　　　Single Element = 要素単体（以下Idにて出力する要素を指定する必要あり）

　▪ Output file name : 出力時のファイル名

　▪ Id : 出力する要素の指定（要素に対して事前にID AttributeでIDを設定する必要あり）

　▪ Orientation : 出力向きの縦横設定

　▪ Ignored elements ID : 出力しない要素の指定（出力範囲指定をページ全体にした場合のみ有効）

　▪ Format : 出力サイズ

　まとめ

・BubbleでのPDF出力について、「SelectPDF」はBubbleプロジェクト内外を問わず出力ページを指定できるため汎用性が高く、お試し利用もあるので使いやすい。

・逆にBubble内だけであれば「Bubble Page To PDF Converter」のほうが要素単体での出力など細かい範囲指定が可能なため使い勝手がいい。