PDFのプレビュー

PDFをプレビュー表示する機能です。Ver.2.11より利用可能です。

使い方

基本的な使い方

以下のように全体をjs-pdf-viewerというclass属性で囲み、その中にimgタグを記述して、data-pdfにPDFへのパスを記述します。

<div class="js-pdf-viewer">
  <img class="js-preview" data-pdf="/path/to/pdf" >
</div>

ページ番号を指定してPDFをプレビューする

さらにimgタグに data-page 属性を適用することでページ番号を指定してPDFをプレビューすることができます。

また、ページ送りするためのボタンを追加することも可能です。

<div class="js-pdf-viewer">
  <img class="js-preview" data-pdf="/path/to/pdf" data-page="2" >
  <button class="js-prev">前へ</button>
  <button class="js-next">次へ</button>
</div>

機能の編集

この機能の編集設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

  pdfPreviewConfig: {
    mark: '.js-pdf-viewer', // PDFプレビューの親要素につけるクラス名
    previewMark: '.js-preview', // 実際にプレビュー画像を表示する img 要素のクラス名
    prevBtnMark: '.js-prev', // 次ページのボタンにつけるクラス名
    nextBtnMark: '.js-next', // 前ページのボタンにつけるクラス名
    pdfAttr: 'data-pdf', // 対象のPDFのパスのdata属性名
    widthAttr: 'data-width', // 幅指定のdata属性名
    pageAttr: 'data-page', // 表示するページ数のdata属性名
    lazyAttr: 'data-lazy', // lazy load するかどうか（1 or 0）のdata属性名
    showBtnClass: 'acms-admin-block' // PDFのページ送りボタンがある場合につくクラス名
},

デモ

---