web-dev-qa-db-ja.com

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

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

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

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

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

htmlpdf
1080
Daniel Silveira

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

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

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

503
lubos hasko

これは手短に言えば簡単で、サードパーティのスクリプトを必要としません。

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

アップデート（1/2018）：

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">
481
Batfan

この目的で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を使用することです。

344
Lukasz Korzybski

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

Chrome 9およびFirefox 3.6では機能しますが、IE 8では「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>
101
Gayle

<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>
53
Suneel Kumar

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ページしかない場合は、これは良いオプションです。もちろん、ImageMagickをWebサーバーにインストールする必要があります（これにはGhostscriptが必要です）。このオプションは共有ホスティング環境では使用できない可能性があります。 このように 動作するPHPプラグイン（imagickと呼ばれる）もありますが、独自の特別な要件があります。

20
Dan Mantyla

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

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

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

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

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

12
Adam Davis

私たちの問題は、法的な理由から、一時的にPDFをハードディスクに保存することが許されていないことです。また、ブラウザでプレビューとしてPDFを表示しているときは、ページ全体をリロードしないでください。

最初にPDF.jSを試しました。 FirefoxとChromeのビューアでBase64と連携していました。しかし、私たちのPDFでは許容できないほど遅くなりました。 IE/Edgeがまったく動作しませんでした。

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

IFrameソリューションは、もちろんChromeとcoでも機能します。このソリューションをChromeに使用しなかった理由は、PDFは正しく表示されますが、[ダウンロード]をクリックするとすぐに Chromeがサーバーに新しいリクエストを送信するためです。プレビューでは。 PDFが表示されるため、必須の隠しフィールド pdfHelperTransferData （PDF生成に必要なフォームデータを送信するため）は設定されなくなりました。 IFrameこの機能/バグについては をご覧ください。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を検出するにはどうすればよいですか？ 他の人に時間を節約してください。

8
George Maharis

Scribdはあなたのドキュメントを彼らのサーバー上でホストする必要はもうありません。アカウントを作成して発行者IDを取得した場合ご自身のサーバーに保存されているPDFファイルをロードするのに必要なのは数行のJavaScriptコードだけです。

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

7
Bjorn

  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/

7
Said Bouigherdaine

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

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

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

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

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

3
PLA
<object width="400" height="400" data="helloworld.pdf"></object>
3
Daryl H

ファイルをブラウザにストリーミングするには、スタックオーバーフローの質問。NET 2.0を使用してブラウザにPDFファイルをバイナリとしてストリーミングする方法-ファイルシステムからファイルを提供する場合でも、動的に生成する場合でも、多少の違いはありますが、これは機能するはずです。

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

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

2
GalacticCowboy

これは私が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
Despertaweb

あなたはこのように保存されたpdfの相対的な場所を使うことができます：

0
Ahmedakhtar11
  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を表示します。

0
fartwhif

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

0
monday