web-dev-qa-db-ja.com

HTML埋め込みPDF iframe

タグを使用してpdfファイルを埋め込みました。

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

これは、Chrome、IE8 +、Firefoxなどで正常に機能しますが、何らかの理由で、一部の人々がIE8で表示している場合、ファイルは埋め込みではなくダウンロードされます。私はこのブラウザが時代遅れであることを知っていますが、それは私のオフィス内の標準ブラウザであるため、ウェブサイトはこのために設計されなければなりません。

なぜこれが起こっているのか、どのように修正するのか、ファイルをダウンロードさせる代わりにエラーメッセージを出す方法についてのアイデアはありますか？

htmlpdfiframeinternet-explorer-8
47
user2931470

Adobe Readerプラグインがインストールされていないため、ダウンロードされている可能性があります。この場合、IE（どのバージョンでも構いません）のレンダリング方法がわからず、ファイルをダウンロードするだけです（たとえば、Chromeには独自の埋め込みPDFがあります_レンダラー）。

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

<iframe>を保持しますが、その中にPDFを表示しないでください。<object>タグで構成されるHTMLページで埋められます。 PDFのHTMLラッピングページを作成すると、likeのように見えるはずです。

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

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

1日<embed>内に<object>をネストする理由答えが見つかります ここSO 。ネストされた<embed>タグの代わりに、ユーザー（または組み込みのビューアー、次の段落を参照）にカスタムメッセージを提供する必要があります（！）。現在、<object>は心配なく使用でき、<embed>は無用です。

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

PDFのサポートを確認するのは難しいので、顧客に別のビューアを提供し、 PDF.JS プロジェクトを見てください。かなり良いですが、レンダリング品質はデスクトップブラウザ向けです- nativePDFレンダラーほど良くありません（画面サイズのため、モバイルブラウザに違いは見られませんでしたが、私は考えます）。

68
Adriano Repetti

ブラウザにpdfプラグインがインストールされている場合、オブジェクトを実行します。そうでない場合は、GoogleのPDF Viewerを使用してプレーンHTMLとして表示します。

<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>
28
mgutt

Iframe

<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>
9
Muddasir Abbas