web-dev-qa-db-ja.com

PDFビューアーをWebページに埋め込むにはどうすればよいですか？

間違っていない場合、Google Docsは、iFrameを介してWebページと同じサーバーに保存されているPDFを表示する手段を提供しますが、クロスでこれを行う方法を知る必要があります-ブラウザ準拠の方法。

htmlpdf
76
Andrei Oniga

Philip Hutchisonによる PDFObject の使用を検討できます。

または、非Javascriptソリューションを探している場合は、次のようなマークアップを使用できます。

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
  <p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p>
</object>
165
Ian Gregory

PDF.js は、ネイティブコードの支援なしで、忠実で効率的なPortable Document Format（PDF）レンダラーの構築を探るHTML5テクノロジーの実験です。これはコミュニティ主導であり、Mozilla Labsによってサポートされています。

デモを見ることができます こちら 。

25
mutil

これはこの方法で少し良くなるかもしれません

<embed src= "MyHome.pdf" width= "500" height= "375">
13
DoesEatOats

間違っていなければ、OPは（後で.jsソリューションを受け入れましたが）Googleの埋め込みPDFディスプレイサーバーが彼のウェブサイトにPDFを表示するかどうかを尋ねていました。

それで、1年半後：はい、そうです。

http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html を参照してください。また、 https://docs.google.com/viewer を参照し、表示するファイルのURLをプラグインします。

編集：読み直し、OPはiFrameを使用しないソリューションを求めていました。 Googleのビューアではそれが可能だとは思わない。

9
Jon

Flex Paperhttp://flexpaper.devaldi.com/ で試してみてください

scribdのように動作します

4
Mp de la Vega

さまざまなReaderプリファレンスでソリューションをテストしてください。サイト訪問者は、FirefoxでAcrobatプラグインを無効にするなどして、ブラウザではなくReader/AcrobatでPDFを開くようにブラウザを設定できます。

Adobe AcrobatとAdobe Readerのバージョンが異なるためにFirefoxが認識する2つの異なるAcrobatプラグインがあるため、結果を確認できませんが、少なくともWebサイトの訪問者が何が起こるかをテストする必要があるようですブラウザでPDFを開かないようにブラウザを設定しています。他の方法で使用できるWebページのように見えるものを見て、ブラウザが要求していないと思われるPDFファイルを開くように言われたとき、非常に迷惑になる可能性があります。場合によっては、ブラウザではなくAdobe ReaderでPDFファイルが自然に開かれ、他の場合にはブラウザはファイルが存在しないというダイアログを表示しました。

Iframeとオブジェクトの両方でこのような不一致が発生し、コードごとに異なる問題が発生しました。

これは単純なHTMLコード用です。私は提案されたフレームワークを試していません。

3
Charles Belov

FlowPaper、特にここにある新しいElementsモードを本当に選択します： https://flowpaper.com/demo/

テキストをシャープに保つと同時にPDFを大幅に平坦化します。つまり、モバイルデバイスでの読み込みがはるかに高速になります。

1
Robby

coolwangluによるpdf2htmlEXは、おそらくpdfファイルをhtmlに変換するための最良のソリューションです。単純な変換を実行してから、HTMLページをiframeまたは類似のものとして埋め込むことができます。

0
Dreizeiler