配布用テンプレート
PDFビューワーテンプレート
PDFをデジタルパンフレットのように表示できる、 配布用のPDFビューワーテンプレートです。 PDFファイルを差し替えるだけで、スマホ・タブレット・PCで閲覧しやすい PDFビューアとして利用できます。
できること
PDFをパンフレットのように表示
PDFをブラウザ上で1ページずつ表示できます。 会社案内、学校案内、塾のパンフレットなどの閲覧に使えます。
スマホ・タブレット対応
画面サイズに合わせてPDFを表示します。 スマートフォンやタブレットでも閲覧しやすい構成です。
ページ送り
前へ・次へボタンのほか、画面の左右タップでもページ送りできます。
ズーム・ピンチ操作
ボタン操作での拡大縮小に加えて、スマホやタブレットでは ピンチ操作にも対応しています。
使い方
- テンプレートZIPをダウンロードします。
- ZIPファイルを展開します。
- 表示したいPDFを
pamphlet.pdfという名前に変更します。 index.htmlと同じフォルダに PDFを置きます。index.htmlを開くと、 PDFビューワーとして表示されます。
PDFファイル名を変更する場合
PDFファイル名を pamphlet.pdf 以外にしたい場合は、HTML内の以下の部分を変更してください。
const PDF_URL = "pamphlet.pdf";例えば、PDFファイル名を school-guide.pdf にする場合は、以下のように変更します。
const PDF_URL = "school-guide.pdf";設置方法
サーバーに設置する場合は、index.html と PDFファイルを同じフォルダにアップロードしてください。
Next.js のサイト内に設置する場合は、public フォルダ配下に HTMLとPDFを置くと、そのまま静的ファイルとして公開できます。
public/pdf-viewer-demo/index.html
public/pdf-viewer-demo/pamphlet.pdfこの場合、以下のURLで表示できます。
https://sgccxy.com/pdf-viewer-demo/index.htmlよくある質問
Q. HTMLとPDFをそのまま置けば表示できますか？
A. はい。Next.jsの場合は public フォルダ配下に置けば表示できます。app フォルダ配下に そのまま置いても静的HTMLとしては公開されないため、 HTMLとPDFは public 配下に置いてください。
Q. PDFはサーバーにアップロードされますか？
A. このテンプレートは、同じフォルダに置いたPDFをブラウザ上で表示します。 PDF編集ツールのようにユーザーがPDFをアップロードするものではありません。
Q. スマートフォンでも使えますか？
A. はい。スマートフォンやタブレットでも閲覧できます。 ピンチ操作による拡大縮小にも対応しています。
Q. 複数のPDFを切り替えて表示できますか？
A. このテンプレートは1つのPDFを表示する構成です。 複数のPDFを切り替えたい場合は、HTMLを複数フォルダに分けて設置するか、 PDFファイル選択機能を追加する必要があります。