DBに格納したPDFをレコードアイテムブロックで描画するサンプルを紹介します。
レコードアイテムブロックにデフォルトで出力されるファイルフィールドのリンクはダウンロード専用になっており、
画面上に描画する事が出来ません。
そのため、PDFを画面上に描画するために本記事記載のJavaScirptのサンプルプログラムを動かす必要があります。
実装の概要
今回のサンプルプログラムは、以下の特徴を持っています。
1. 指定されたURLからPDFを取得し、Blob化
2. Blob URLを生成してiframeや
2. Blob URLを生成してiframeや
設置するソースコード
以下のソースコードを設置してください
BODY: レコードアイテムブロックのHTML（bodyタブに設置してください）
JavaScript: レコードアイテムブロックのJavaScript（JSタブに設置してください）
JavaScript: レコードアイテムブロックのJavaScript（JSタブに設置してください）
HTMLの実装
レコードアイテムブロックのbodyタブを編集してください。
iframe要素に関しては、デザイン上表示をしたい箇所に設置してください。
input type hiddenのvalue値はお使いの環境に合わせて修正してください。
<!-- PDFのURLを埋め込む（Thymeleaf） -->
<input type="hidden" id="pdf-url" th:value="${file.fileUrl}" />
<!-- PDF表示用iframe -->
<iframe id="pdfViewer" width="500px" height="500px"></iframe>
JavaScriptの実装
レコードアイテムブロックのJSタブを編集してください。
document.addEventListener("DOMContentLoaded", function () {
var input = document.getElementById('pdf-url');
if (!input) return;
var url = input.value;
fetch(url)
.then(function (res) {
return res.blob();
})
.then(function (blob) {
// MIMEタイプを明示的にapplication/pdfにする
var pdfBlob = new Blob([blob], { type: "application/pdf" });
var blobUrl = URL.createObjectURL(pdfBlob);
document.getElementById('pdfViewer').src = blobUrl;
})
.catch(function (e) {
console.log("PDF表示エラー:", e);
});
});
実装のポイント
1. BODYの編集： input type hiddenにthymeleafからPDFのURLを取得と描画用のiframeのコンテナを設置
2. JSの設置： thymeleafから取得したPDFのURLからBlob化してiframeへ返す
2. JSの設置： thymeleafから取得したPDFのURLからBlob化してiframeへ返す
まとめ
ダウンロード専用になっているファイルフィールドのURLをBlob化して明示的に用途を示すことで、
ダウンロード以外の描画等の事が可能になります。
今回のサンプルプログラムを参考に、自身のシステムに組み込んでみてください。
