97

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

4

10 に答える 10

208

PhilipHutchisonによる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>
于 2012-12-29T11:23:16.007 に答える
37

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

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

于 2012-12-29T11:37:26.970 に答える
30

これはこの方法で少しうまくいくかもしれません

<embed src= "MyHome.pdf" width= "500" height= "375">
于 2016-03-26T11:10:52.613 に答える
9

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

それで、1年半後:はい、そうなるでしょう。

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

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

于 2014-09-02T00:23:07.920 に答える
4

FlexPaper を試してみてくださいhttp://flexpaper.devaldi.com/

Scribdのように機能します

于 2012-12-29T11:19:11.243 に答える
3

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

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

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

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

于 2014-01-11T00:18:48.797 に答える
3

ブートストラップを使用すると、レスポンシブでモバイルな最初の埋め込みファイルを作成できます。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="address of your file" allowfullscreen></iframe>
</div>

Aspect ratios can be customized with modifier classes.
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
于 2020-01-24T10:32:09.150 に答える
1

coolwangluによるpdf2htmlEXは、おそらくpdfファイルをhtmlに変換するための最良の解決策です。単純な変換を行ってから、htmlページをiframeなどとして埋め込むことができます。

于 2016-02-02T15:23:12.377 に答える
1

私は本当にFlowPaperを選びます。特に、 https ://flowpaper.com/demo/にある新しいElementsモードを選びます。

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

于 2016-08-16T17:46:48.963 に答える
0
<iframe src="https://docs.google.com/viewer?url=**https://www.fsc.esn.ac.lk/sites/default/files/2021-10/AcSchedule.pdf**&embedded=true" style="width:100%; height:500px;" frameborder="0"></iframe>

URLhttps://www.fsc.esn.ac.lk/sites/default/files/2021-10/AcSchedule.pdfを自分のアドレスに置き換える必要があります

于 2021-10-18T08:35:57.467 に答える