強烈推薦！Word、Excel、PPT、PDF在線預覽解決方案
大家好，我是鋒哥；
平時大伙開發(fā)項目的時候，經(jīng)常遇到業(yè)務需求Word、Excel、PPT、PDF在線預覽功能；
市面上這方面的解決方案也有一些，不做過多評價。今天主要推薦的是一個特定提前下的永久免費解決方案；
調(diào)用微軟的在線預覽功能（預覽前提：資源必須是公共可訪問的，不能是IP地址，只能是域名，且資源地址透明鏈接包含中文需要進行URL編碼，并且文檔必須可在Internet上公開訪問）此方法可行。
一，Wod在線預覽測試Demo
<a?href="https://view.officeapps.live.com/op/view.aspx?src=http://blog.java1234.com/cizhi20211008.docx"?
target="_blank"?
rel="nofollow">
在線預覽Word
a>
運行效果：
如有需要還可以通過iframe將文檔嵌入到頁面當中實現(xiàn)在線預覽
<iframe
src='https://view.officeapps.live.com/op/view.aspx?src=http://blog.java1234.com/cizhi20211008.docx'
width="100%"?height="1000px"?frameborder="1"?scrolling="no">
iframe>
運行效果：
二，Excel在線預覽測試Demo
<a?href="https://view.officeapps.live.com/op/view.aspx?src=http://blog.java1234.com/moban20211008.xls"
target="_blank"?
rel="nofollow">在線預覽Excela>
運行效果：
同樣支持iframe內(nèi)嵌：
<iframe?width="100%"?height="1000px"?frameborder="1"?scrolling="no"
????src="https://view.officeapps.live.com/op/view.aspx?src=http://blog.java1234.com/moban20211008.xls">iframe>
三，PPT在線預覽測試Demo
<a?href="https://view.officeapps.live.com/op/view.aspx?src=http://blog.java1234.com/ppt20211008.pptx"
target="_blank"
rel="nofollow">在線預覽ppta>
運行效果：
同樣支持iframe內(nèi)嵌：
<iframe
????src='https://view.officeapps.live.com/op/view.aspx?src=http://blog.java1234.com/ppt20211008.pptx'
????width="100%"?height="600px"?frameborder="1"?scrolling="no">
iframe>
運行效果：
四，PDF在線預覽測試Demo
1、前端實現(xiàn)PDF文件在線預覽功能
法一：PDF區(qū)別于office的三類文檔在于它不會默認打開鏈接自動下載而是瀏覽。PDF文件理論上可以在瀏覽器直接打開預覽但是需要打開新頁面。在僅僅是預覽pdf文件且UI要求不高的情況下可以直接通過a標簽href屬性實現(xiàn)預覽
<a?href="http://blog.java1234.com/pdf20211008.pdf"?target="_blank"
??????rel="nofollow">在線預覽PDFa>
2、頁面內(nèi)顯示PDF預覽
如果不希望打開新的頁面直接預覽PDF文科則可以通過jquery插件jquery.media.js來實現(xiàn)預覽功能。但是這種只能實現(xiàn)PDF預覽功能（包括其他各種媒體文件）但是對word等其他文檔類型的文件不適用。
搞一個div
<div?id="handout_wrap_inner1">div>
jquery.media.js渲染：
<script?type="text/javascript">
????$('#handout_wrap_inner1').media({
??????width:?'100%',
??????height:?'100%',
??????autoplay:?true,
??????src:?'http://blog.java1234.com/pdf20211008.pdf',
????});
script>
運行效果：
評論
圖片
表情