Webブラウザ内にPDFを表示する

Webブラウザ内の.htmlページにPDFを表示するにはどうすればよいですか？

Googleドキュメントの埋め込み可能なPDFビューアを使用しています。ドキュメントをGoogleドキュメントにアップロードする必要はありませんが、オンラインで利用できる必要があります。

<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

iframeを使用する代わりに、サードパーティに応じて、flexpaperまたはpdf.jsの使用を検討してください。

PDF.jsを使用しましたが、問題なく動作します。これがデモです。

オブジェクトタグを使用して優先

<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1' 
        type='application/pdf' 
        width='100%' 
        height='700px'>

幅と高さは任意の値に変更できることに注意してください 。http：//www.w3schools.com/tags/tag_object.aspにアクセスしてください。

最も簡単な方法は、iframeを作成し、ソースをPDFのURLに設定することです。

（アヒルの狂ったHTMLデザイナー）自分でやった、うまく動作する、クロスブラウザー（バンカーに這う）。

ブラウザのプラグインがこれらの設定を制御するため、強制することはできません。ただし、の<a href="whatver.pdf">代わりに単純なことを行うことができます<a href="whatever.pdf" target="_blank">。

PDFをホストしている限り、ターゲット属性が最適です。つまり、相対ファイルの場合、_blank値でtarget属性を使用すると問題なく機能します。

<e>
  <a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
     href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>

絶対パスの場合はエンジンがに行きますU nified R esource L ocator、それ彼らを開きます。したがって、ターゲット属性を抑制します。

<e>
  <a alt="StackExchange Handbook" title="StackExchange Handbook"
     href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>

どちらの場合も、ブラウザは信頼できる良い仕事をします。

PDFObjectなどのサードパーティソリューションを介してJavaScriptを使用して埋め込むこともできます。

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

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

または、Googleドキュメントの埋め込み可能なPDFビューアを使用します。

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

この単純なGoogleDocアプローチを使用することもできます。

<a  style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>

これにより、フローを歪めることなくドキュメントを表示するための新しいページが作成されます。

簡単な解決策は、それをiframeに入れて、ユーザーがそれをサポートするプラグインを持っていることを期待することです。

（私はそうではありませんが、Acrobatプラグインはリソースを大量に消費し、不安定さの原因となっているため、触れるブラウザからプラグインを削除することにしました）。

複雑ですが、比較的人気のある解決策は、フラッシュアプ​​レットに表示することです。

JPedal（Javaライブラリ）を使用して、PDFファイルページをサーバー上でPNGファイルとしてレンダリングします。これをJavaScriptと組み合わせると、視覚化とナビゲーションを高度に制御できます。

私は最近、.pdfドキュメントのよりモバイルフレンドリーで応答性の高いバージョンを提供する必要がありました。これは、狭い電話画面では左右に大きくスクロールする必要があるためです。垂直スクロールのみを許可し、水平スクロールを回避するために、次の手順が有効でした。

• Chromeブラウザで.pdfを開きます
• [Googleドキュメントで開く]をクリックします
• [ファイル]> [ダウンロード]> [Webページ]をクリックします
• ダウンロードしたドキュメントをクリックして解凍します
• 解凍したHTMLドキュメントをクリックして、Chromeブラウザで開きます
• fnF12を押してChrome開発ツールを開きます
• copy（document.documentElement.outerHTML.replace（/ padding：72pt 72pt 72pt 72pt; /、''）.replace（/ margin-right：。*？pt / g、 ''））をコンソールに貼り付け、Enterキーを押します微調整したドキュメントをクリップボードにコピーするには
• テキストエディタ（メモ帳など）を開くか、私の場合はVSCodeを貼り付けて、.html拡張子を付けて保存します。

結果は見栄えが良く、デスクトップ環境とモバイル環境の両方で使用できました。

PDF / DOC / DOCXファイル形式で保存されたコンテンツを表示することは、Webページにpdf / doc / docxファイルを表示するのに理想的です。

単純なimgタグを使用してみましたか？

<img scr="https://www.typomania.co.uk/pdfs/lipsum.pdf">