web-dev-qa-db-ja.com

div内にAdobe pdfを表示します

ユーザーが確認し、[同意する]ボタンをクリックする必要があるPDFファイルがあります。 div内でPDFをどのように表示しますか？

htmlacrobat
35
Phillip Senn

はい、できます。

2007年の次のスレッドのコードを参照してください。 DIV内のPDF

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

それは使用しています <object>は、CSSでスタイル設定できるため、フロートしたり、境界線を付けたりすることができます。

（最後に、pdfファイルを編集して大きな境界線を削除し、jpg画像に変換しました。）

61
Ron Knee

以下に、Iframeを使用してDiv内でPDFを表示する別の方法を示します。

<div>
  <iframe src="/pdf/test.pdf" style="width:100%;height:700px;"></iframe>
</div>
<div>
  <!-- I agree button -->
</div>
2
Sudhir

ウェブサイトでこれを使用します

http://issuu.com/smartlook

PDFをブラウザに直接表示するために非常にカスタマイズ可能です。基本的に、この種のことに反対しない場合は、FlashオブジェクトでPDFをホストします。

こちらが当社ウェブサイトの sample です。

1
Jason Watts

JavascriptライブラリPDF.JSを使用して、div内でPDFを表示できます。PDFのサイズは、divのサイズに応じて調整できます。PDFの次/前のページに移動するためのイベントハンドラーを設定することもできます。

PDF.JSチュートリアル-PDF with JavaScript）を表示する方法 をチェックアウトして、PDF.JSをHTMLコードに統合する方法を確認できます。

1
Useful Angle

あなたはz-indexプロパティがpdf（外部オブジェクト）に適用されていないため、機能していないと思います。したがって、PDFビュー境界にコントロールを追加すると、pdfビューの背後に表示されます。

0
vishwas kadam