【Bubble 】アプリ上にPDFデータを表示させる方法

こんにちは！ノーコードに特化した開発を行っております。

EPICs合同会社です。

今回はノーコードツール「Bubble 」で作成したアプリ内に「PDFデータを表示させる方法」について解説をしていきます！

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

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

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

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

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

氏名

法人名

メールアドレス

電話番号

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

実装イメージ

実装手順

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

データベースの準備

PDFの表示にあたり必要なのは、基本的にPDFを格納する「File形式」のデータのみです！

今回は「User」の中に「PDF」という「File形式」のデータを用意しました。
※お好みでPDFデータを格納したい箇所に「File形式」のデータを用意してもらえれば問題ないです。

HTMLの配置と設定

データの準備ができたらPDFを表示させたいページを開き、HTMLを配置しましょう。

HTMLの配置ができたら、設定を追加していきます。
HTMLのAppearanceに下記のコードを入れましょう！

<iframe src="(PDFが格納されているデータベースの指定)
"width="100%"height="100%"</iframe>

“width=やheight=の後ろの””内の数字を変えることでPDFの表示サイズを変更することも可能です！

例："width="50%"height="50%"</iframe>

これで設定は以上です！

実際にPDFのデータをデータベースに格納して、表示がされるか試してみましょう！

本記事が開発力の向上や開発を検討している方のお役に立てておりましたら幸いです。