web-dev-qa-db-ja.com

PDFをHTMLページに埋め込む方法は？

ユーザーがすべての主要なデバイスで表示できるようにPDFファイルをHTMLページに埋め込む必要があります。ほとんどのアプローチはデスクトップで問題なく動作しますが、 iPadデバイス。 PDFは、iframeまたは埋め込みタグ内に配置されている場合、スクロールできなくなりました。

この問題を克服するために、以下の手法を使用しました。

1）ノードに pdf-image を使用し、PDFを画像に変換してから、divにスライドします。このアプローチの問題は、画像の品質が低下することです。 Webでの表示には適していません。

2） PDF.js をMozillaで使用するすべてのデバイスで正常に動作しますが、iPadのページが非常に遅くなり、応答しなくなります

3）Googleを使用するPDFビューア

<iframe src="https://docs.google.com/viewer?url=http://public-Url-of-pdf.pdf&embedded=true" frameborder="0" height="500px" width="100%"></iframe>

このアプローチの問題は、PDFを公開する必要があることですこれは、セキュリティ上の理由からしたくありません。

上記の方法のどれも私のために働いていません。 iPadでも機能するページにPDFを埋め込むためのソリューションはありますか？.

同僚の1人が、ページにPDFを埋め込むためにLibreOffice（Open Office）headlessを使用することについて教えてくれましたが、使用方法に関するドキュメントが見つかりませんか？

誰か助けてくれますか？ :(

前もって感謝します！

javascripthtmlnode.jspdfopenoffice.org
4
writeToBhuwan
<embed src="http://example.com/the.pdf" width="500" height="375" />

純粋なHTMLについては、上記を試してください。ただし、JavaScriptで使用したい場合は、mozillaによるPdf.jsを試してください。 https://github.com/mozilla/pdf.js

3
PPShein

PDFをWebページに埋め込む最も簡単な方法は、オブジェクトタグを使用することです。

<object data="assets/test.pdf" type="application/pdf" width="100%" height="800px">
 <p>It appears you don't have a PDF plugin for this browser.
 No biggie... you can <a href="assets/test.pdf">click here to
  download the PDF file.</a></p>
</object>

上記のコードが行うことは次のとおりです。-サイトを閲覧しているユーザーがPDFビューアプラグイン（一部のブラウザではデフォルトで含まれています）を持っている場合）は、PDFブラウザ内：-ユーザーがPDFビューアプラグインを持っていない場合、PDFをダウンロードして表示するためのリンクが表示されます。彼らのサイトでそれを。

2
Node_Ninja