HTMLにPDFを埋め込むための推奨される方法は？

HTMLにPDFを埋め込むための推奨される方法は何ですか？

• iFrame？
• オブジェクト？
• 埋め込む？

アドビはそれについて何と言っていますか？

私の場合、PDFはオンザフライで生成されるため、フラッシュする前にサードパーティのソリューションにアップロードすることはできません。

おそらく最良の方法は、PDF.JSライブラリを使用することです。これは、サードパーティのプラグインなしのPDFドキュメント用の純粋なHTML5 / JavaScriptレンダラーです。

オンラインデモ：http : //mozilla.github.com/pdf.js/web/viewer.html

GitHub：https : //github.com/mozilla/pdf.js

これは、要は、迅速、簡単で、サードパーティのスクリプトを必要としません。

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

更新（2018年1月）：

AndroidのChromeブラウザーはPDF埋め込みをサポートしなくなりました。GoogleドライブのPDFビューアを使用してこれを回避できます

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

この目的でGoogle PDFビューアを使用することもできます。私の知る限り、これは公式のGoogle機能ではありませんが（これは間違っていますか？）、とてもうまくスムーズに機能します。PDFをどこかにアップロードして、そのURLを使用する必要があります。

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

重要なのは、Flashプレーヤーが不要で、JavaScriptを使用していることです。

クエリ文字列でいくつかのオプションを渡すことにより、ブラウザでのPDFの表示方法をある程度制御できます。IE8では動作しないことに気づくまで、私はこの動作に満足しています。:(

Chrome 9とFirefox 3.6では機能しますが、IE8では「PDFを表示できない場合は、ここにエラーメッセージを挿入してください」というメッセージが表示されます。

ただし、上記のブラウザーの古いバージョンはまだテストしていません。しかし、これは誰かを助けるためにとにかく持っているコードです。これにより、ズームが85％に設定され、スクロールバー、ツールバー、ナビゲーションペインが削除されます。IEでも機能するものが見つかったら、投稿を更新します。

<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>

との両方<object>を使用すると<embed>、ブラウザの互換性の幅が広がります。

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
    </embed>
</object>

ImageMagickでPNGに変換し、PNGを表示します（高速でダーティ）。

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '<img src="$dir$name.png" />';
?>

これは、簡単な解決策が必要で、クロスブラウザーのPDF表示の問題を回避したい場合、およびPDFが1ページまたは2ページのみの場合に適しています。もちろん、WebサーバーにImageMagickをインストールする必要があります（Ghostscriptも必要です）。これは、共有ホスティング環境では使用できないオプションです。このように機能するPHPプラグイン（imagickと呼ばれます）もありますが、独自の特別な要件があります。

このコードを見てください-HTMLにPDFを埋め込むには

<!-- Embed PDF File -->
<object data="YourFile.pdf" type="application/x-pdf" title="SamplePdf" width="500" height="720">
    <a href="YourFile.pdf">shree</a> 
</object>

FDViewはPDF2SWF（それ自体はxpdfに基づいています）をSWFビューアと組み合わせて、サーバー上でオンザフライでPDFドキュメントを変換して埋め込むことができます。

xpdfは完全なPDFコンバーターではありません。より良い結果が必要な場合、GhostviewにはPDFドキュメントを他のフォーマットに変換する機能があり、Flashビューアをより簡単に構築できる場合があります。

しかし、単純なPDF文書の場合、FDViewは適度に機能するはずです。

私たちの問題は、法律上の理由により、ハードディスクにPDFを一時的に保存することが許可されていないことです。また、ブラウザでプレビューとしてPDFを表示する場合、ページ全体を再読み込みしないでください。

まず、PDF.jSを試しました。FirefoxおよびChromeのビューアでBase64と連携しました。ただし、PDFでは許容できないほど低速でした。IE / Edgeはまったく機能しませんでした。

したがって、HTMLオブジェクトタグのBase64文字列を使用して試してみました。これもIE / Edgeでは機能しませんでした（PDF.jsと同じ問題かもしれません）。Chrome / Firefox / Safariでも問題ありません。そのため、ハイブリッドソリューションを選択しました。IE / EdgeではIFrameを使用し、他のすべてのブラウザーではオブジェクトタグを使用します。

もちろん、IFrameソリューションはChromeと共同でも機能します。このソリューションをChromeで使用しなかった理由は、PDFは正しく表示されますが、プレビューで[ダウンロード]をクリックするとすぐにChromeがサーバーに新しいリクエストを送信するためです。必須の隠しフィールドpdfHelperTransferDataPDFがIFrameに表示されるため、（PDF生成に必要なフォームデータを送信するため）は設定されなくなりました。この機能/バグについては、ChromeはPDFをダウンロードするときに2つのリクエストを送信します（そして、そのうちの1つをキャンセルします）。

現在、問題のある子IE9とIE10が残っています。これらについては、プレビューソリューションをあきらめ、プレビューボタンをクリックしてドキュメントを（プレビューの代わりに）ダウンロードとしてユーザーに送信しました。私たちは多くのことを試しましたが、解決策を見つけたとしても、ユーザーのこの小さな部分のための余分な努力は努力の価値がありませんでした。ダウンロードのソリューションは、こちらからダウンロードできます：IFrameで更新せずにPDFをダウンロードします。

Javascript：

var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
        // Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
        var form = document.getElementById('pdf-helper-form');
        $("#pdfHelperTransferData").val(transferData);
        form.target = "iframe-pdf-shower";
        form.action = "serverSideFunctonWhichWritesPdfinResponse";
        form.submit();
 } else {
        // Case non IE use Object tag instead of iframe
        $.ajax({
            url: "serverSideFunctonWhichRetrivesPdfAsBase64",
            type: "post",
            data: { downloadHelperTransferData: transferData },
            success: function (result) {
                $("#object-pdf-shower").attr("data", result);
            }
        })
 }

私たちのHTML：

<div id="pdf-helper-hidden-container" style="display:none">
   <form id="pdf-helper-form" method="post">
        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
   </form>
</div>

<div id="pdf-wrapper" class="modal-content">
    <iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
    <object id="object-pdf-shower" type="application/pdf"></object>
</div>

IE / Edgeのブラウザタイプを確認するには、こちらをご覧ください：JavaScriptを使用してInternet Explorer（IE）とMicrosoft Edgeを検出するにはどうすればよいですか？これらの調査結果が他の誰かの時間を節約することを願っています。

次のように、保存されたPDFの相対位置を使用できます。

例1

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

例2

<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>

1. PDFを保持するコンテナーを作成する

   <div id="example1"></div>

2. 教えてPDFObjectを埋め込むためにどのPDF、およびそれをどこに埋め込むこと

   <script src="/js/pdfobject.js"></script>
   <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>

3. オプションでCSSを使用して、寸法、境界線、マージンなどの視覚的なスタイルを指定できます。

   <style>
   .pdfobject-container { height: 500px;}
   .pdfobject { border: 1px solid #666; }
   </style>

ソース：https : //pdfobject.com/

Scribdでは、サーバーでドキュメントをホストする必要がなくなりました。それらでアカウントを作成すると、発行者IDが取得されます。わずか数行のJavaScriptコードで、独自のサーバーに保存されているPDFファイルをロードできます。

詳細については、開発者ツールを参照してください。

<object width="400" height="400" data="helloworld.pdf"></object>

ImageMagickのconvertコマンドを使用したPdfToImageServlet。

使用例： <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>

これは、AXIOSとVue.jsで行った方法です。

        axios({
            url: `urltoPDFfile.pdf`,
            method: 'GET',
            headers: headers,
            responseType: 'blob'
        })
        .then((response) => {
            this.urlPdf = URL.createObjectURL(response.data)
        })
        .catch((error) => {
            console.log('ERROR   ', error)
        })

urlPDFをHTMLに動的に追加します。

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>

考慮すべきオプションの1つは注目すべきPDF
です。PDFでリアルタイムのオンラインコラボレーションを行うことを計画しているのでない限り、無料のプランがあります。

以下iframeを任意のhtmlに埋め込み、結果をお楽しみください。

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>

ファイルをブラウザーにストリーミングするには、Stack Overflowの質問を参照してください。PDF ファイルをバイナリとして.NET 2.0を使用してブラウザーにストリーミングする方法 -多少の違いはありますが、ファイルシステムからファイルを提供しているかどうかに関係なく機能するはずです。または動的に生成されます。

そうは言っても、参照されているMSDNの記事は世界をかなり単純化した見方をしているため、HTTPSを介してPDFをブラウザーに正常にストリーミングすること、および提供する必要があるヘッダーの一部を読むことをお勧めします。

そのアプローチを使用すると、おそらくiframeが最善の方法です。ファイルをストリーミングする1つのWebフォームをsrc用意し、属性を最初のフォームに設定して別のページにiframeを配置します。

1. 入力PDFバイトのblobを作成します
2. このクロスブラウザーの回避策でパッチされたiframeとPDF.jsを使用します

iframeのURIは次のようになります。

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

これで、FF、Chrome、IE 11、およびEdgeはすべて、URLの標準のblob URIを介して渡されたiframeのビューアにPDFを表示します。

私はReactでPDFをプレビューする必要があったので、いくつかのライブラリーを試した後、私の最適な解決策はデータをフェッチしてそれをebmedすることでした。

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

自分でPDF.JSをホストしたくない場合は、DocDroidを試すことができます。GoogleドライブのPDFビューアに似ていますが、カスタムブランディングが可能です。

これは問題なく動作し、ブラウザはFirefoxで処理します。IEを確認していません...

<script>window.location='url'</script>