web-dev-qa-db-ja.com

html5とjqueryを使用してWebページにpdfコンテンツを表示する方法は?

pdfドキュメントをmydiv内に表示する方法私はHTML5jquery を使用してモバイルサイトを構築しています。 PDFドキュメントを Turnjs div内に表示する必要があります

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

このスレッドを読む- http://www.webdeveloper.com/forum/showthread.php?152923-PDF-within-a-DIV

26
Dipak

次のコードを使用できます。

<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.Adobe.com/products/acrobat/readstep2.html">

または、Google Docs embeddable PDF viewer:

<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>
10
Hieu Le

あえて言うなら、それは非難されることを恐れての名前ですが、iframeを使用して、ブラウザがナビゲーションを提供できるようにすることもできます。

5
dove

PDFをGoogleドライブにドラッグします。次に、新しいPDF(通常はGoogleドライブの左上にあります)をクリックし、上部の共有アイコンをクリックして、advancedに移動し、 changeをクリックし、「Public」ラジオボタンがクリックされていることを確認します。 [〜#〜] save [〜#〜]をクリックしてから、[〜#〜] done [〜 #〜]。次に、Googleドライブに戻り、pdfをクリックして開き、ポップアウトアイコン(右上、X閉じるアイコンの隣)をクリックします。 PDFが全画面表示になったら、[その他のアクション]アイコン(3つの縦のドット)をクリックします。そこに「埋め込み」の機会があります。それをクリックすると、埋め込みコードが表示されます。ほら!

注:このようにして得られたPDFは、ブログまたはHTML Webサイトに貼り付けることができ、ドキュメント内のリンクはすべて機能します!!また、ホバーすると右上に小さなポップアウトアイコンが表示され、pdfが全画面表示されます。また、ページに複数のページを配置する場合は、divにポップできます。いくつかの例は http://internetpdf.com にあります。

ジョン・バーチ

1
John Burch