1. ホーム
  2. Web制作
  3. html5

HTML表示 pdf, word, xls, ppt方式例

2022-01-27 14:04:04

1、PDFファイルオンラインプレビュー

1. HTML5新タグ <embed> の定義と使用法

<embed> タグは、埋め込まれたコンテンツを定義します。このタグは自己閉鎖的で、ブラウザがPDFの埋め込みに対応していない場合、このタグのコンテンツは全く表示されないことを意味しています。

インスタンス

<embed src="/file/operation-manual.pdf" type="application/pdf" width="100%" height="100%" />

2.<iframe>

iframe>メソッドは、PDFを埋め込むための最も簡単な方法の1つです。しかし、<iframe>ブラウザがPDFレンダリングをサポートしていない場合、十分なフォールバックコンテンツを提供できないことがあります。

<iframe src="Your PDF address" width="100%" height="100%">
  This browser does not support PDF, please click to view.
  <a href="PDF address"> Download PDF</a>
</iframe>


3.<object>

<embed> と異なり、<object> 要素は、ブラウザがPDFの埋め込みに対応していない場合に、コンテンツのヒントを与えることができます。全てのブラウザは <object> 要素をサポートしていますが、各ブラウザで実装方法に違いがあることが多いです。この<object>要素を使用する場合は、ブラウザとオペレーティングシステムでページを十分にテストするようにしてください。

インスタンス

<object data="/file/manual.pdf" type="application/pdf" width="100%" height="100%">
This browser does not support PDF:
<a href="/file/operation-manual.pdf">Download PDF</a>. </p>
</object>


2. word, xls, pptオンラインプレビュー

ワード、ppt、xlsファイルのオンラインプレビューは比較的簡単で、マイクロソフトのオンラインプレビュー機能を呼び出すことで直接実現できます(プレビューの前提条件:リソースが一般に公開されていること)。

<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'>
</iframe>

src はプレビューを実装するファイルのアドレスです。

追加:マイクロソフトで実装されたドキュメントのGoogleのオンラインプレビュー(リソースが公にアクセス可能でなければなりません)が、壁を越える必要があります。

<iframe src="https://docs.google.com/viewer?url=fileurl"></iframe>


3. XDOCオンラインプレビュー

XDOCはDataURIで表現されたDOCドキュメントをプレビューすることができます。また、XDOCはテキスト、パラメータ付きテキスト、htmlテキスト、jsonテキスト、公式ドキュメントなどをオンラインでプレビューすることができます。詳細は公式ドキュメントをご覧ください。

次の方法でワードのクイックプレビューを実現できますが、文書に使用するエディタに制限がある場合があります。

<a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://www.xdocin.com/demo/demo.docx& quot; target="_blank" rel="nofollow">XDOC</a>



HTML表示pdf、word、xls、pptの方法例に関するこの記事を紹介し、より関連するHTML表示pdf、word、xls、pptの内容は、スクリプトホーム以前の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来よりスクリプトホームをサポートして願っています!。