HTMLにPDFを埋め込む
iframeのコードをコピーして、ページにPDFを表示
コードを書かずにPDFを埋め込む
PDFの保管と、そのPDF用のiframeコードの作成はTiiny Hostが行います。ホームページに貼り付けたコードの位置に、PDFが専用の操作ボタン付きで表示されます。PDFをあとで差し替えた場合も、埋め込んであるすべてのページに新しい版が出ます。
埋め込みコードの機能
📱 どのブラウザでも同じ表示
埋め込んだPDFは、ブラウザの種類に関係なく同じビューアーで表示されます。
🚧 コードは用意済み
iframeのコードはプロジェクトのメニューに入っており、自分で書く必要はありません。
🔐 埋め込み先でもパスワード
Soloプランのパスワード保護は、埋め込んだPDFにも有効です。
💻 どのパソコンからでも管理
埋め込んだPDFはダッシュボードで管理するため、使うパソコンを選びません。
🤝 リンクでも共有
埋め込んだPDFには通常のリンクもあり、メールやSNSでも共有できます。
🖥 表示モードの切り替え
有料プランでは、プレゼンテーション表示や、ツールバーを出さないミニマル表示を選べます。
PDFを自分で埋め込む場合との比較
iframeやobjectタグを書くこと自体は難しくありません。それでもPDFを置くサーバーは必要で、埋め込んだファイルの見え方もブラウザごとに違います。下の表では、自分で埋め込む場合に別途用意するものを並べました。
埋め込みコードは無料プランにも付いています
埋め込みコードは、無料プランを含むすべてのプランで使えます。無料プランのPDFは0.5MBまでで、料金表や短い配布資料に向いています。
- ✓ 埋め込めるPDF1つ
- ✓ PDFは0.5MBまで
- ✓ 月5,000回の訪問と5GBの転送量
- ✓ 埋め込みコードと共有用リンク
- – ビューアーにTiiny Hostバナーが表示されます
- Tiny $5 · バナーなし、PDFは25MBまで、QRコード、アクセス解析
- Solo $13 · PDF5つ、パスワード保護、ダウンロードの禁止、独自ドメイン、API
- Pro $31 · PDF15個、メールアドレス収集、チームメンバー
- Pro Max $74 · PDF数無制限、ストレージ2TB
埋め込めるPDFの大きさ
1ファイルあたりのアップロード上限料金表や配布資料は、たいていどのプランにも収まる大きさです。アクセスの多いページに埋め込むときは、ファイルサイズに加えて月の訪問数の枠も確かめてください。
自分のコードからPDFを埋め込む
スクリプトはAPIキーを使ってPDFをアップロードし、レスポンスから公開URLを読み取ります。そのURLはiframeのsrcにそのまま使えます。同じドメインへのPUTではファイルだけが入れ替わり、埋め込み側を直す必要はありません。
curl -X POST https://ext.tiiny.host/v1/upload \
-H "x-api-key: $TIINY_API_KEY" \
-F "files=@catalog.pdf" \
-F "domain=product-catalog.tiiny.site"
# → https://product-catalog.tiiny.site
# 差し替えは同じドメインにPUTWebサイトに埋め込まれているPDF
セミナーの発表資料
講演のスライドをイベントページに埋め込み、参加者があとから見返せるようにします。
商品カタログ
ネットショップのページに埋め込んだカタログは、サイトのコードに手を付けずに季節ごとに入れ替えられます。
教材
授業のシラバスや参考文献リストを、学校のWebサイトやLMSに埋め込みます。
Share PDFs Online: Embed and Link Techniques
When to embed a PDF on a page and when a link is the better choice.
Styling Embedded PDFs in HTML
Connecting a stylesheet to an HTML page, useful when styling the page around an embed.
