ブラウザでのPDFの表示・見え方を指定する方法

ブラウザでのPDFの表示・見え方を指定する方法

お客さんからPDFが大きく表示されすぎなのでもうちょっと小さくしてくれない?との要望があった。
調べたらブラウザで見るときの表示の指定・変更ができるみたいなので備忘録としてまとめてみる。

結構、ブラウザ間によって対応未対応があるので注意が必要です。

PDFの指定とは?

これはどういうことか。つまりは、PDFをブラウザ上で見るときに、aタグのリンクでPDFの見え方をある程度指定できるということです。

PDFの見え方の調整方法

ブラウザでのPDFの見え方はリンクの後ろにパラメータをつけることで実現することができます。
例えば

表示範囲を指定

横幅いっぱいとか縦の大きさが収まる大きさとかです。

ブラウザ対応
Chome: 対応
Firefox: 未対応
Safari: 未対応

・1ページの高さに揃える
view=FitVをパラメータとしてつける。
【サンプル】 縦フィット

<a href="/pdf/dummy.pdf#view=FitV">PDF</a>

・1ページの横幅100%
view=FitHをパラメータとしてつける。
【サンプル】 横100%

<a href="/pdf/dummy.pdf#view=FitH">PDF</a>

※Firefoxは他のzoomが対応しているので、Firefoxwも対応するならzoom=50などで調整してみてもいいかも。(Safariはzoomも未対応)

ページ指定

何ページ目を表示したいかを設定できます。
page={ページ番号}をパラメータとしてつける。
【サンプル】 2ページ目表示

ブラウザ対応
Chome: 対応
Firefox: 対応
Safari: 未対応

<a href="/pdf/dummy.pdf#page=2">PDF</a>

他にも倍率指定やツールバーを出す出さないなどもあるみたいですが、一旦は基本的に使いそうなものにフォーカスしてみました。

ちなみに複数指定も可能です

ちなみに2ページ目を高さ揃えて表示させたいということがあった場合、こんな感じで&でパラメータを繋いであげると複数指定できます。
【サンプル】 2ページ目を高さ揃えて表示

<a href="/pdf/dummy.pdf#page=2&view=FitH">PDF</a>

Kouki Okuda (ocws)サービス作りたいフリーランス / フロントエンドエンジニア / 👦お仕事募集中👦⇒⇒⇒ WordPress / EC / React / Vue / Laravel / SEO / MEO / Webマガジン運営 http://hanzou-magazine.net
https://ocws.jp

\ よかったらフォローお願いします! /