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