HTML表示 pdf, word, xls, ppt方式例
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の内容は、スクリプトホーム以前の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来よりスクリプトホームをサポートして願っています!。
関連
-
フォントの調整のメニューの右上隅にWeChat内蔵のブラウザでHTML5は、ページが間違った問題を表示するために発生する
-
html5 pushstateとブラウザリターンイベントのリスニング
-
h5ページ evokeアプリがインストールされていない場合、ダウンロードにジャンプします(iOS、Android)。
-
Html5 Streamを用いたリアルタイムモニタリングシステムの開発
-
音声付き動画の自動再生機能の実装方法
-
divやimgの画像の高さを幅に合わせる方法
-
html5 色彩公差キーイング with canvas
-
Canvasユーティリティライブラリ Fabric.jsマニュアル
-
HTML5 における dialog 要素のテイスト
-
モバイルhtml5で長押しイベントをシミュレートする方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
html5呼び出しカメラサンプルコード
-
amazeuiのツリーノード自動展開パネルの実装と、最初のツリーノードの選択
-
amaze uiを使った詳細チュートリアル
-
キャンバスを使用して画像サイズを圧縮する例
-
HTML5でWeb Notificationのデスクトップ通知を実装する方法
-
異なるiosデバイスでのh5ページの詳細 問題点まとめ
-
HTML5で実現する写真・カメラ機能
-
N種類のキャンバスエクスポートイメージのクロスドメインポーズサマリーのロックを解除する
-
ウェブアプリのページスクロールラグの解決策を詳しく解説
-
モバイル開発 HTML5 ボタンをクリックすると、ページがちらついたり、背景が黒くなったりする問題