HTML中如何顯示pdf、word、xls、ppt

這篇文章主要介紹HTML中如何顯示pdf、word、xls、ppt，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

1、PDF文件在線預覽

1.HTML5新標簽<embed>定義和用法

<embed> 標簽定義嵌入的內容，這個標簽是自閉合的的，也就是說如果瀏覽器不支持PDF的嵌入，那么這個標簽的內容什么都看不到。

實例

<embed src="/file/操作手冊.pdf" type="application/pdf" width="100%" height="100%" />

2.<iframe>

<iframe>方法是嵌入PDF的最簡單方法之一。但是，如果<iframe>瀏覽器不支持PDF呈現，則可能無法提供足夠的后備內容。

實例

<iframe src="您的PDF地址" width="100%" height="100%">
　　該瀏覽器無法支持PDF，請點擊查看：
　　<a href="PDF地址">下載 PDF</a>
</iframe>

3.<object>

與<embed>不同，<object>如果瀏覽器不支持PDF嵌入，則該元素可提示內容。所有瀏覽器都支持<object>元素，但是，每個瀏覽器中的實現方式通常存在差異。如果您使用該<object>元素，請務必在瀏覽器和操作系統中徹底測試您的頁面。

實例

<object data="/file/操作手冊.pdf" type="application/pdf" width="100%" height="100%">
該瀏覽器不支持PDF.請點擊查看:
<a href="/file/操作手冊.pdf">Download PDF</a>.</p>
</object>

2、word、xls、ppt在線預覽

word、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文本、公文等在線預覽，具體實現方法請看官方文檔

下面這種方式可以實現快速預覽word但是對文件使用的編輯器可能會有一些限制

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

html是什么

html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。

以上是“HTML中如何顯示pdf、word、xls、ppt”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！