【Bubble】PDFダウンロード機能の作り方

こんにちは!EPICs合同会社です!

本記事ではノーコードツールBubbleでPDFのダウンロード機能の実装をする方法についてお伝えをしていきます!

なおPDFのダウンロード機能の作り方はいく通りかありますが、今回は「Bubble Page to PDF converter」というプラグインを使用した方法を紹介します!

動画解説バージョンはこちら!

目次
無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

  • ノーコード開発会社の選び方
  • EPICsのノーコード受託開発の特徴
  • 支援実績・事例集

    氏名

    法人名

    メールアドレス

    電話番号

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

    実装イメージ

    実装手順

    以下の手順で実装します。

    1. 「Bubble Page to PDF converter」をインストール
    2. Bubble Page to PDF converterを画面上に配置+設定
    3. WorkFlowの設定

    「Bubble Page to PDF converter」をインストール

    まずは今回の主役!「Bubble Page to PDF converter」をPluginsからインストールをしましょう!

    「Bubble Page to PDF converter」は有料のプラグインになりますが、使い勝手は抜群です!

    Bubble Page to PDF converterを画面上に配置+設定

    設定手順
    1. Bubble Page to PDF converterを配置
    2. Converter to PDFの設定
    3. ID Attributeの設定

    1.Bubble Page to PDF converterを配置

    Bubble Page to PDF converterのインストールができるとvisual elementのなかに「Converter to PDF」という選択肢が表示されます。

    こちらを画面上に配置しましょう!
    →配置場所やサイズはお好みで大丈夫です!

    配置ができたら画面上では2つの設定を行います!

    2.Converter to PDFの設定

    Converter to PDF側の設定を行います。

    必須で設定が必要な内容は「File uploads enabled」にチェックを入れることです!

    こちらにチェックが入っていないとPDFダウンロードができません!

    3.ID Attributeの設定

    ID Attributeの設定のためにはSetting側の設定を行う必要があります。

    「Setting(サイドバー)」→「General」の順でページを開き、最下部の「Expose the option to add an ID attribute to HTML element」にチェックを入れましょう!

    次にダウンロードをしたいデータが表示されているelementのID Attributeに任意のIDを入れます。
    →IDはなんでもOKです!

    最後にPDFのダウンロードを行わせる要素の配置をしましょう。

    これでDesign画面側の設定は以上です。

    次にWork Flowの設定を行いましょう!

    WorkFlowの設定

    WorkFlowはとってもシンプルでstep1のみでPDFのダウンロードが行えます!

    デフォルト設定が入力されているものを除き、必須の設定項目は下記の二つです。

    項目説明
    idID Attribute で設定した内容と同じものを入力します
    Output file namePDFをダウンロードした際のファイル名の設定

    そのほかにもこのあたりの設定は覚えておくといいでしょう!

    項目説明
    Convert targetPDFとして出力するエレメントの指定
    Custom fomat横幅と縦幅をカスタマイズできます。
    例:
    ・unitをmmに設定
    ・Custom formatを「52,110」で指定
    →横幅52mm,縦幅110で設定される
    Ignore element IDここで指定したID Attributeを持つエレメントをPDFの出力対象から外せる

    そのほかにも様々な便利な設定があるので、ぜひ試してみてください!

    本記事の内容は以上です!

    少しでもお役に立てておりましたら幸いです!

    「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
    ノーコード開発ツールを使ったアプリ・システム開発にお困りですか?
    1からの開発も、途中からの開発も、お気軽にEPICsにご相談ください!
    この記事を書いた人
    EPICs株式会社 編集部
    創業よりBubble、Adaloなどノーコードに特化したアプリ・システムの受託開発事業を展開するノーコードのプロフェッショナル集団です。
    目次