web-dev-qa-db-ja.com

埋め込みとオブジェクト

Adobe PDFビューアーを表示するときに、HTMLファイルで使用するのに最適なタグはどれですか。現在、私は以下のコードを使用していますが、奇妙な副作用があります（たとえば、別のINPUTテキストボックスに設定した開始フォーカスを盗むようです。jQueryUIResizeableクラスでは実際に再生できないようです） ;など）

<embed src="abc.pdf" type="application/pdf" />

OBJECTタグでも同じことができますか？あるタグと他のタグを使用することの利点/欠点はありますか？

htmlhtml5pdfembed-tag
146
JayhawksFan93

オブジェクトと埋め込み-常に埋め込みを使用しない理由

結論：OBJECTは良い、EMBEDは古い。 IEのPARAMタグに加えて、ブラウザがOBJECTの参照プラグインをサポートしていない場合、OBJECTタグ間のコンテンツがレンダリングされます。また、コンテンツはレンダリングされるかどうかに関係なくhttp要求を取得します。

objectは、ページに何かを埋め込むための現在の標準タグです。 embedは、Netscapeによって（imgに沿って）含まれていましたobjectのようなものが w3c 心にある前に。

objectを含むPDFを含む ：

<object data="data/test.pdf" type="application/pdf" width="300" height="200">
  alt : <a href="data/test.pdf">test.pdf</a>
</object>

本当に必要インラインPDFをほぼすべてのブラウザーで表示する場合、古いブラウザーはembedを理解しますが、objectは理解しないため、これを行う必要があります。

<object data="abc.pdf" type="application/pdf">
    <embed src="abc.pdf" type="application/pdf" />
</object>

このバージョンは検証しません。

155
Esteban Küber

その他のオプション：

<object type="application/pdf" data="filename.pdf" width="100%" height="100%">
</object>

<object type="application/pdf" data="#request.localhost#_includes/filename.pdf" 
        width="100%" height="100%">
  <param name="src" value="#request.localhost#_includes/filename.pdf">
</object>
4
aguz

また、iframeメソッドを使用することもできますが、これはクロスブラウザー互換ではありません（たとえば、chromiumまたはAndroidおよびおそらくその他->代わりにダウンロードするように求められます）。 dataURLと通常のURLで動作します。他の例がdataURLSで動作するかどうかはわかりません（他の例がdataURLSで動作するかどうかを教えてください）。

 <iframe class="page-icon preview-pane" frameborder="0" height="352" width="396" src="data:application/pdf;base64, ..DATAURLHERE!... "></iframe>
3
ejectamenta

おそらく、WebページでのPDF表示に最適なクロスブラウザーソリューションは、Mozilla PDF.jsプロジェクトコードを使用することです。node.jsサービスとして実行し、次のように使用できます。

<iframe style="width:100%;height:500px" src="http://www.mysite.co.uk/libs/pdfjs/web/viewer.html?file="http://www.mysite.co.uk/mypdf.pdf"></iframe>

Pdf.jsの使用方法に関するチュートリアルは、こちらにあります ejectamentaブログ記事

2
ejectamenta

オブジェクトはそうですが、埋め込みは標準タグではありません。 記事 は、状況がそれほど単純ではないように見えるので、役立つと思われます。 PDFの例が含まれています。

1
aehlke