HTML里顯示pdf、word、xls、ppt的方法示例
1、PDF文件在線預(yù)覽
1.HTML5新標簽<embed>定義和用法
<embed> 標簽定義嵌入的內(nèi)容,這個標簽是自閉合的的,也就是說如果瀏覽器不支持PDF的嵌入,那么這個標簽的內(nèi)容什么都看不到。
實例
<embed src="/file/操作手冊.pdf" type="application/pdf" width="100%" height="100%" />
2.<iframe>
<iframe>方法是嵌入PDF的最簡單方法之一。但是,如果<iframe>瀏覽器不支持PDF呈現(xiàn),則可能無法提供足夠的后備內(nèi)容。
實例
<iframe src="您的PDF地址" width="100%" height="100%"> 該瀏覽器無法支持PDF,請點擊查看: <a href="PDF地址">下載 PDF</a> </iframe>
3.<object>
與<embed>不同,<object>如果瀏覽器不支持PDF嵌入,則該元素可提示內(nèi)容。所有瀏覽器都支持<object>元素,但是,每個瀏覽器中的實現(xiàn)方式通常存在差異。如果您使用該<object>元素,請務(wù)必在瀏覽器和操作系統(tǒng)中徹底測試您的頁面。
實例
<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在線預(yù)覽
word、ppt、xls文件實現(xiàn)在線預(yù)覽的方式比較簡單可以直接通過調(diào)用微軟的在線預(yù)覽功能實現(xiàn) (預(yù)覽前提:資源必須是公共可訪問的)
<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就是要實現(xiàn)預(yù)覽的文件地址
補充:google的文檔在線預(yù)覽實現(xiàn)同微軟(資源必須是公共可訪問的)
<iframe src="https://docs.google.com/viewer?url=fileurl"></iframe>
3、XDOC在線預(yù)覽
XDOC可以實現(xiàn)預(yù)覽以DataURI表示的DOC文檔,此外XDOC還可以實現(xiàn)文本、帶參數(shù)文本、html文本、json文本、公文等在線預(yù)覽,具體實現(xiàn)方法請看官方文檔
下面這種方式可以實現(xiàn)快速預(yù)覽word但是對文件使用的編輯器可能會有一些限制
<a target="_blank" rel="nofollow">XDOC</a>
到此這篇關(guān)于HTML里顯示pdf、word、xls、ppt的方法示例的文章就介紹到這了,更多相關(guān)HTML顯示pdf、word、xls、ppt內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
使用PDF.JS插件在HTML中預(yù)覽PDF文件的方法
這篇文章主要介紹了使用PDF.JS插件在HTML中預(yù)覽PDF文件的方法的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-29利用html5 file api讀取本地文件示例(如圖片、PDF等)
本篇文章主要介紹了利用html5 file api讀取本地文件示例(如圖片、PDF等),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-03-07- 本篇文章主要介紹了HTML5在線預(yù)覽PDF的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-14

html轉(zhuǎn)換為pdf案例的一些總結(jié)(多圖推薦)
這篇文章主要介紹了關(guān)于html轉(zhuǎn)換為pdf的案例,wkhtmltopdf測試 PhantomJS測試 IText和Flying Sauser等一些知識點都做了詳細說明,具體操作步驟大家可查看下文的詳細講解,2017-08-18


