2013-10-29 20 views
24

私はpdfファイルを埋め込むためにタグを使用しています。HTML埋め込まれたPDFはiframe

<iframe id="iframepdf" src="files/example.pdf"></iframe> 

これはクローム、IE8 +、Firefoxのなどでは正常に動作しますが、一部の人々はIE8でそれを見ているいくつかの理由で、ファイルは、ダウンロードの代わりに埋め込んでいます。私はこのブラウザが古くなっていることを知っていますが、それは私のオフィス内の標準的なブラウザであり、そのためにウェブサイトはこのために設計されなければなりません。

誰もが、私はそれを修正するか、他の代わりにファイルをダウンロードさせるのエラーメッセージを入れることができますどのように、なぜこれが起こっている上の任意のアイデアを持っていますか?

答えて

47

Adob​​e Readerのプラグインのインストールがないので、それはおそらくをダウンロードしています。この場合、IE(どのバージョンでも問題ありません)をレンダリングする方法がわからず、単にファイルをダウンロードします(たとえば、Chromeには独自のPDFレンダラが組み込まれています)。

と言われています。 は、PDFを表示する最善の方法ではありません(モバイルブラウザ(Safariなど)との互換性を忘れないでください)。一部のブラウザは、外部アプリケーション内(または別のブラウザウィンドウ内)で常にそのファイルを開きます。私が見つけた最良かつ最も互換性のある方法は少しトリッキーですが、私は(も、かなり時代遅れ)しようとしたすべてのブラウザで動作します:

あなた< iframe>を保つが、それはHTMLで満たされるでしょう、その中にPDFを表示しません。ページは<object>タグで構成されます。あなたのPDF用のHTMLラッピングページを作成し、それがのようにこのなります。もちろん

<html> 
<body> 
    <object data="your_url_to_pdf" type="application/pdf"> 
     <embed src="your_url_to_pdf" type="application/pdf" /> 
    </object> 
</body> 
</html> 

をあなたはまだ適切なプラグインブラウザにインストールする必要があります。モバイルデバイスでSafariをサポートする必要がある場合は、this postもご覧ください。

第一。なぜ<embed><object>の中にネスティングされていますか?答えはhere on SOです。ネストされた<embed>タグの代わりに、あなたのユーザ(またはビルトインビューア、次の段落を参照)のためのカスタムメッセージを提供する必要があります(!)。今日は<object>が心配なく使用でき、<embed>は役に立たない。

第二。なぜHTMLページですか?したがって、PDFビューアがサポートされていない場合、フォールバックを提供することができます。内部ビューア、プレーンHTMLエラーメッセージ/オプションなど...

PDF.JSプロジェクトを見て、あなたの顧客に別のビューアを提供するかもしれないので、PDFサポートをチェックするのは難しいですが、デスクトップブラウザ用 - ネイティブ PDFレンダラほど良好ではない(私が原因で、画面サイズのモバイルブラウザの違いを見ていない、私は考えます)。

+0

ありますAdobe Readerプラグインがインストールされている場合にのみiframeを表示し、そうでない場合はエラーメッセージを表示します。 – user2931470

+0

はい...「iframe」を使用していません!エラーメッセージ(または別のビュー、私の答えの最後の部分を参照)を提供できる "オブジェクト"を使用してください。 –

+0

これは現在動作していますが、ファイルはズームインされていますか?私はiframeを使っていたので、divの幅に収まるようにpdfができました。 – user2931470

4

インラインフレーム

<iframe id="fred" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="PDFData.pdf" frameborder="1" scrolling="auto" height="1100" width="850" ></iframe> 

オブジェクト

<object data="your_url_to_pdf" type="application/pdf"> 
    <embed src="your_url_to_pdf" type="application/pdf" /> 
</object> 
+1

そのオブジェクトで印刷をトリガーする方法、印刷が定義されていませんか? – Miguel

7

ブラウザは、それはプレーンなHTMLとしてそれを表示するには、GoogleのPDFビューアを使用していない場合、それは、オブジェクトを実行したPDFプラグインをインストールしている場合:

<object data="your_url_to_pdf" type="application/pdf"> 
    <iframe src="https://docs.google.com/viewer?url=your_url_to_pdf&embedded=true"></iframe> 
</object> 
+0

これは魅力的ですが、文書を使用して 'プレビューできません 'というメッセージが多く表示されます – Ancinek

+0

@Ancinek例がありますか? – mgutt

関連する問題