2012-10-19 9 views
30

iframeでpdfファイルを開きます。私は次のコードを使用しています:<iframe>でPDFファイルを開くには?

<a class="iframeLink" href="https://something.com/HTC_One_XL_User_Guide.pdf" 
    jQuery1640737952376988841="85"> User guide </a> 

Firefoxではうまくいきますが、IE8では開かれていません。

誰もIEのためにそれを動作させる方法を知っていますか?

+5

1) 'class'属性値は引用符で囲む必要があります。 2)jQuery-ish属性はどういったものですか? 3)どのようにあなたはこれがiframeにあるべきであることを示していますか? – David

答えて

16

これはからHTTP(S)アクセス可能PDFをリンクするためのコードです:フィドル

<iframe src="https://research.google.com/pubs/archive/44678.pdf" 
    width="800px" height="600px" > 

http://jsfiddle.net/cEuZ3/1545/

EDIT:あなたは<a>タグ(onclickイベントから、Javascriptを使用することができます)実行時にiFrameのSRC属性を設定するには...

編集2:明らかに、バグです(ただし、回避策があります):

PDF files do not open in Internet Explorer with Adobe Reader 10.0 - users get an empty gray screen. How can I fix this for my users?

+0

実際、私はIEのデバッガからjquerryと他のものが来ている理由をコピーしました...他の賢明なクラスはコード内にもあります。そして、それはmozillaのためにうまくいきます。 – user1753210

+0

あなたのリンクを試してみましたが、それでも実行しようとするなら、IEのiframeではなく、Acrobat ReaderでPDFを開きます。しかし、あなたがクロームやモジラで同じことをしようとするなら、意図したとおりにうまく動作します。しかし、私はIEのためのiframeでそれを開こうとしています – user1753210

+0

デスクトップブラウザではうまく動作しますが、モバイルブラウザではうまく動作しません...それを働かせるために私を助けてもらえますか? – Gathole

37

iframeを使用すると、PDFをすべてのブラウザで「表示」することはできません。ブラウザがPDFファイルをどのように処理するかによって異なります。一部のブラウザ(FirefoxやChromeなど)には、PDFがレンダリングされているため、古いブラウザ(古いバージョンのIEの方がファイルをダウンロードしようとするかもしれません)のようにPDFをインラインで表示できます。

代わりに、HTMLファイルにPDFを埋め込むためのJavaScriptライブラリであるPDFObjectをチェックすることをおすすめします。これはブラウザの互換性をかなりうまく処理し、IE8で動作する可能性が非常に高いです。あなたのHTMLで

、あなたはPDFファイルを表示するためにdivを設定できます:

<div id="pdfRenderer"></div> 

次に、あなたがそのdivにPDFを埋め込むためのJavascriptコードを持つことができます。

var pdf = new PDFObject({ 
    url: "https://something.com/HTC_One_XL_User_Guide.pdf", 
    id: "pdfRendered", 
    pdfOpenParams: { 
    view: "FitH" 
    } 
}).embed("pdfRenderer"); 
+1

これはiframeでPDFを読み込む以外に何も作りませんでした。 –

+5

これはポイント。しかし、PDFをiframeの代わりにオブジェクトにロードしています。 –

+0

オブジェクトデータタグにpdfファイルのsrcパスが公開されないようにするにはどうすればよいですか? –

5

また、 WebサーバーがContent-Disposition = inlineでファイルを送信することを確認することが重要です。 これはあなたがファイルを自分で読んでいる場合場合も、それはブラウザにコンテンツのsendいない可能性があります:

PHPで、それは次のようになります...

...headers... 
header("Content-Disposition: inline; filename=doc.pdf"); 
...headers... 

readfile('localfilepath.pdf') 
-4

はこのようにそれを実行します。

<iframe src="http://samplepdf.com/sample.pdf" width="800px" height="600px"></iframe> 

iframeタグを忘れずに閉じてください。

関連する問題