MAIL
サイト内にPDF内の全ページをサムネイルで固定表示します
今回の実装における要件は以下のように定めました。
①PDFファイル内の全てのページがサムネイル表示されること
②複数の添付ファイル項目に対応していること
今回、PDFのページをCanvasに描画してサムネイルとして表示するために、サードパーティのライブラリ「PDF.js」を使用しています。
そのため、まずはテーブルの管理のHTML編集画面で「Head bottom」にCDNからPDF.jsを読み込むための以下のスクリプトを、出力先「編集」で設定します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.min.js"></script>次に、スクリプト編集画面で以下のスクリプトを出力先「編集」で設定します。
$p.events.on_editor_load = function () {
// PDF.js の設定
const pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.worker.min.js';
// サムネイルを生成する関数
function generatePdfThumbnails(pdfUrl, containerId) {
// PDFを取得してCanvasに描画
pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
const totalPages = pdf.numPages; // PDFの総ページ数を取得
for (let pageNum = 1; pageNum <= totalPages; pageNum++) {
pdf.getPage(pageNum).then(function (page) {
const viewport = page.getViewport({ scale: 0.3 }); // サムネイルの縮尺
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport,
};
page.render(renderContext).promise.then(function () {
// サムネイル画像を追加表示
const pageContainer = document.createElement('div');
pageContainer.classList.add('pdf-page-thumbnail');
pageContainer.appendChild(canvas);
$(`#${containerId}`).append(pageContainer);
});
}).catch(function (error) {
console.error(`ページ ${pageNum} の読み込みエラー:`, error);
});
}
}).catch(function (error) {
console.error('PDFの読み込みエラー:', error);
});
}
// 添付ファイルのリンクからPDFのURLを取得
$('.control-attachments-item').each(function () {
const pdfUrl = $(this).find('.file-name').first().attr('href');
const containerId = `thumbnail_${$(this).attr('id')}`;
// サムネイルを表示するためのdivを追加
$(this).append(`<div id="${containerId}" class="pdf-thumbnails"></div>`);
// 全ページのサムネイルを生成
generatePdfThumbnails(pdfUrl, containerId);
});
}サムネイルを生成する関数「generatePdfThumbnails」部分でPDFファイル内の全ページをCanvasに描画しています。
サムネイルの縮尺もここで設定しており、お好みで変更が可能です。（今回はscale: 0.3としました）
そして、各サイトのサムネイル用に<div>を作成し、containerId内に追加しています。
このスクリプトでは、添付ファイル項目のファイル名すぐ右に表示させています。
最後に、このサムネイル表示要素のスタイルを設定します。
スタイル編集画面で以下のようなスタイルを設定しました。
こちらもお好みで編集可能です。
.pdf-thumbnails {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
.pdf-page-thumbnail {
flex: 0 0 calc(10% - 10px);
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
padding: 5px;
background-color: #000;
}では実際に、このスクリプトの動作をご覧ください。
添付ファイル項目AとBの2項目を用意し、添付ファイルAに5ページのPDF「test1.pdf」、添付ファイルBに3ページのPDF「test2.pdf」を添付してみます。
まとめ
いかがでしたか？
設定次第では表示サイズを大きくプレビューとして活用することや、表紙だけをサムネイルとして表示させることなど可能です。
用途やお好みで様々なカスタマイズが可能ですので、是非お試しください。
弊社ではプリザンターをご使用中、または、これからご使用になられる方向けに、運用ノウハウ集、プリザンター逆引き辞典、スタイル・スクリプトサンプル集の販売を行っております。
また、 プリザンターからのExcel帳票出力・PDF帳票出力の支援パック販売 も行っております。
プリザンター導入の支援や、スクリプト開発などの支援も行っておりますので、まずは気軽にご相談ください。
※ご相談の内容によっては有料となる場合がございます。予めご了承ください。
☆☆☆
ブログ内容への質問や追加説明をご希望の方は【 問い合わせフォーム 】からお気軽にお問い合わせください
☆☆☆
添付ファイルのPDFの中身をダウンロードせずに一目で確認したい
こんにちは、シーイーシーカスタマサービスの新村です。
弊社ブログの第267回で 添付ファイルの画像をサムネイル表示させる方法 をご紹介いたしましたが、今回はPDFをサムネイル表示させる方法をご紹介いたします。
画像と違い、PDFファイルは複数ページにわたる場合がほとんどです。
そのため、ほんの少しの確認だけであってもダウンロードが必要となってしまいますが、ダウンロードする手間だけでなく、保存したファイルを整理する必要が出てきます。
そんな手間がこの方法で軽減できるかもしれません。