私が間違っていない場合、Google Docsは、を介してWebページと同じサーバーに保存されているPDFを表示する手段を提供しますが<iframe>
、クロスブラウザーに準拠した方法でこれを行う方法を知る必要があります。
10 に答える
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>
これはこの方法で少しうまくいくかもしれません
<embed src= "MyHome.pdf" width= "500" height= "375">
私が間違っていなければ、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を使用しないソリューションを求めていました。グーグルのビューアではそれは不可能だと思います。
FlexPaper を試してみてくださいhttp://flexpaper.devaldi.com/
Scribdのように機能します
さまざまなリーダー設定でソリューションをテストしてください。サイト訪問者は、たとえばFirefoxでAcrobatプラグインを無効にすることにより、ブラウザではなくReader/AcrobatでPDFを開くようにブラウザを設定できます。
AdobeAcrobatとAdobeReaderのバージョンが異なるため、Firefoxが認識する2つの異なるAcrobatプラグインがあるため、結果を確認できませんが、少なくともWebサイトの訪問者がどうなるかをテストする必要があるようです。ブラウザでPDFを開かないようにブラウザが設定されています。彼らが他の方法で使用可能なウェブページのように見えるものを見て、彼らのブラウザが彼らが要求していないと思うPDFファイルを開くように彼らをしつこくしているとき、それはかなり迷惑かもしれません。PDFファイルがブラウザではなくAdobeReaderで自発的に開かれる場合もあれば、ブラウザがファイルが存在しないことを示すダイアログを表示する場合もあります。
iframeとオブジェクトの両方でこのような不一致が発生しました。コードごとに異なる問題が発生しました。
これは単純なHTMLコード用です。提案されたフレームワークは試していません。
ブートストラップを使用すると、レスポンシブでモバイルな最初の埋め込みファイルを作成できます。
<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>
coolwangluによるpdf2htmlEXは、おそらくpdfファイルをhtmlに変換するための最良の解決策です。単純な変換を行ってから、htmlページをiframeなどとして埋め込むことができます。
私は本当にFlowPaperを選びます。特に、 https ://flowpaper.com/demo/にある新しいElementsモードを選びます。
PDFを大幅にフラット化すると同時に、テキストをシャープに保ちます。つまり、モバイルデバイスでの読み込みがはるかに高速になります。
<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を自分のアドレスに置き換える必要があります