HTMLインラインPDF

Question

私は自分のHTMLにインラインでPDF文書を表示しようとしています。しかし、私が知っているすべての方法は空のコンテンツ領域を示しています。

ここでの例をご確認ください：http://codepen.io/abhishekisnot/pen/WxmPmd/?editors=1001

をこれまでのところ私は、以下のすべてのメソッドを使用してみました：

<object data="http://www.pro-react.com/materials/appendixA.pdf" type="application/pdf" width="100%" height="100%" style="border: 1px solid red;"></object> 

<embed src="http://www.pro-react.com/materials/appendixA.pdf" width="100%" height="100%" type='application/pdf' style="border: 1px solid red;"> 

<iframe src="http://www.pro-react.com/materials/appendixA.pdf" width="100%" height="100%" style=" border: 1px solid red;" frameborder="0"></iframe> 

Answer 1

あなたはおそらくあなたがしたい場合はブラウザ間で一貫して動作する方法を見つけるつもりはありませんブラウザベースまたはブラウザプラグインベースのビューアを使用してPDFを実際のPDFとして表示します。代わりにJavaScriptをHTML5に変換して表示するので、JavaScriptビューアの1つが必要になります。

srcやdataで参照されるコンテンツを表示するには、オブジェクトタグと埋め込みタグの両方がブラウザプラグインに依存していますが、Edge、Chrome、Safariなどのブラウザではプラグインを使用せずにPDFを表示し、独自のクロムを使用してPDFをナビゲートします。私はこれらのタグではうまくいかないと思います。

Answer 2

Recommended way to embed PDF in HTML?をご覧ください。それは有用な情報がたくさんあります。

しかし、私は若干異なる解決法を実装しました。この答えはhttps://stackoverflow.com/a/15971133/932282です。