Web開發中的文檔在線預覽解決方案，支持多種文件格式

什么會寫這篇文章？

在我們平時的開發中，會遇到用戶提的各種需求，其中有一些還是不得不實現的，常見的就有文檔在線預覽功能，這是一個用戶提出來還不好反駁的功能需求，在用戶看來，這是一個在正常不過的需求，因此今天就介紹三個文檔在線預覽或者編輯（本質上是兩種）的解決方案，希望通過本文能幫助到大家解決這樣類似的需求，而且是免費的。

常見的文檔預覽格式要求

一般情況下，用戶所要求預覽的文檔莫過于Office系列的或者PDF或者圖片，后兩者其實很簡單，一般不需要費多大力氣就能完美解決，基本上可以說瀏覽器自身就已經滿足這個需求了，但是看似普通的office文檔想要在線預覽，特別是可能還想編輯，這樣的需求可能就不是那么容易就解決了，特別上網上有很多收費的解決方案，價格較高，而且可能我們并不需要那么強大的功能，因此就會去找一些替代方案來節省成本，下面我會依次介紹這三種方案。

微軟免費提供在線版本office預覽

這種方式相對于后面兩種方案是最簡單的，這種方案的想法是來源于網易郵箱的在線預覽文檔功能，微軟提供了免費的預覽服務：

https://view.officeapps.live.com/op/view.aspx?src=你的文檔地址

這種方式的好處顯而易見，你什么都不需要做，只需要提供文檔的地址就行，當然這也是有前提的，貌似是你的文檔地址必須要是域名形式而且不帶端口號的，也就是說這種方案只能滿足文檔機密性較低，而且滿足上面提到的條件才行。

截圖預覽：

文章第一張圖就是Excel文檔的預覽效果截圖

PPT在線預覽效果：

Word在線預覽效果：

從預覽效果來看和在Office打開無二，是一個非常不錯的選擇，圖片或者PDF就不要使用這個了，還是用瀏覽器自帶的吧！

自部署Office Online Server

這種方案適合大多數情況，我本人也推薦使用這種方式，因為可控性比較高，實際上就是將第一種方式搬到自己本地。部署在自己的服務器上的，本文并不討論具體如何安裝，因為其安裝相對復雜，對環境要求比較高，這就是它的缺點。微軟自身提供了安裝教程，網絡上也有很多類似的相關介紹，其使用效果和之前的截圖類似，不過如果是自己部署的話是可以實現編輯功能的。

get地址

直接搜索“msdn 我告訴你”，除非是有廣告，不然應該第一個就是，然后到服務器菜單下
找到它，如下圖

然后你就可以去找相關教程了，以下是微軟官網的教程，大多數情況你可能還需要各種搜索

https://docs.microsoft.com/zh-cn/OfficeOnlineServer/office-online-server-overview

虛擬機安裝

如果你覺得上面的方法比較復雜，或者說想先自己嘗試下，那么你也可以使用下面的方案，以下方案是在收集資料的時候發現的，筆者并未有相關的環境進行測試，感興趣的網友可以移步到以下地址查看，同時感謝網絡上熱愛分享的同志們

https://www.jianshu.com/p/c67d103484a4

開源的文檔在線預覽方案 kkFileView

這是國人開源的項目，支持doc、docx、ppt、pptx、xls、xlsx、zip、rar、mp4、mp3以及眾多類文本如txt、html、xml、java、properties、sql、js、md、json、conf、ini、vue、php、py、bat、gitignore等文件在線預覽，可以說很全面了，而且部署相對簡單，具體如何部署可以到開源地址：

https://gitee.com/kekingcn/file-online-preview

效果預覽，分別是word、圖片和壓縮文件

從預覽效果上可能比不上Office Online，但是它支持的格式多，而且是開源的，主要使用spring boot，可以部署在windows、linux或者MacOS上，在windows上部署相對簡單一些，最主要的還支持移動端預覽!

總結

以上是我認為基本能夠滿足大多人需求的解決方案了，你可以針對自己的項目選擇適合自己項目的方案，希望能夠通過本文的介紹給大家帶來一些思路，方案很多，要找到一個適合的才是最重要的！

、前端實現pdf文件在線預覽功能

方式一、pdf文件理論上可以在瀏覽器直接打開預覽但是需要打開新頁面。在僅僅是預覽pdf文件且UI要求不高的情況下可以直接通過a標簽href屬性實現預覽

<a href="文檔地址"></a>

方式二、通過jquery插件jquery.media.js實現這個插件可以實現pdf預覽功能（包括其他各種媒體文件）但是對word等類型的文件無能為力。實現方式： js代碼：

<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery.media.js"></script>
復制代碼

html結構：

 <body>
 <div id="handout_wrap_inner"></div>
 </body>
復制代碼

調用方式：

<script type="text/javascript"> 
 $('#handout_wrap_inner').media({
		width: '100%',
		height: '100%',
		autoplay: true,
 src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
 }); 
</script>
復制代碼

方式三、直接通過頁面內嵌iframe

$("<iframe src='"+ this.previewUrl +"' width='100%' height='362px' frameborder='1'>").appendTo($(".video-handouts-preview"));
復制代碼

此外還可以在iframe標簽之間提供一個提示類似這樣

<iframe :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</iframe>
復制代碼

方式四、通過標簽嵌入內容

<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">

此標簽h5特性中包含四個屬性：高、寬、類型、預覽文件src！與< iframe > < / iframe > 不同，這個標簽是自閉合的的，也就是說如果瀏覽器不支持PDF的嵌入，那么這個標簽的內容什么都看不到！

方式五、標簽和iframe使用差別較小

<object :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</object>
復制代碼

除方式二以外其他都是直接通過標簽將內容引入頁面實現預覽

方式六、PDFObject

PDFObject實際上也是通過標簽實現的直接上代碼

<!DOCTYPE html>
<html>
<head>
 <title>Show PDF</title>
 <meta charset="utf-8" />
 <script type="text/javascript" src='pdfobject.min.js'></script>
 <style type="text/css">
 html,body,#pdf_viewer{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 }
 </style>
</head>
<body>
 <div id="pdf_viewer"></div>
</body>
<script type="text/javascript">
 if(PDFObject.supportsPDFs){
 // PDF嵌入到網頁
 PDFObject.embed("index.pdf", "#pdf_viewer" );
 } else {
 location.href="/canvas";
 }
</script>
</html>

還可以通過以下代碼進行判斷是否支持PDFObject預覽

if(PDFObject.supportsPDFs){
 console.log("Yay, this browser supports inline PDFs.");
} else {
 console.log("Boo, inline PDFs are not supported by this browser");
}
復制代碼

方式七、PDF.js

PDF.js可以實現在html下直接瀏覽pdf文檔，是一款開源的pdf文檔讀取解析插件，非常強大，能將PDF文件渲染成Canvas。PDF.js主要包含兩個庫文件，一個pdf.js和一個pdf.worker.js，一個負責API解析，一個負責核心解析。

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、word文件

XDOC可以實現預覽以DataURI表示的DOC文檔，此外XDOC還可以實現文本、帶參數文本、html文本、json文本、公文等在線預覽，具體實現方法請看官方文檔

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

<a  target="_blank" rel="nofollow">XDOC</a>
復制代碼

4、excel文件

目前excel文件已經有了類似pdf.js那樣的解析sheet.js

總結：

1、免費純前端方式實現在線預覽word、excel、ppt最優選擇微軟在線預覽（不可編輯）

2、利用后端將文件轉為圖片，前端以圖片形式預覽（可行方案）

3、購買在線預覽服務例如百度DOC文檔服務、永中、I DOC VIEW等

著名：文章內容是從網上搜集資料所得；在次發表只為自己以及頭條程序員兄弟日后使用圖個方便。

覺得有用記得收藏轉發！

什么會寫這篇文章？

常見的文檔預覽格式要求

微軟免費提供在線版本office預覽

這種方式相對于后面兩種方案是最簡單的，這種方案的想法是來源于網易郵箱的在線預覽文檔功能，微軟提供了免費的預覽服務：

https://view.officeapps.live.com/op/view.aspx?src=你的文檔地址

截圖預覽：

文章第一張圖就是Excel文檔的預覽效果截圖

PPT在線預覽效果：

Word在線預覽效果：

從預覽效果來看和在Office打開無二，是一個非常不錯的選擇，圖片或者PDF就不要使用這個了，還是用瀏覽器自帶的吧！

自部署Office Online Server

get地址

直接搜索“msdn 我告訴你”，除非是有廣告，不然應該第一個就是，然后到服務器菜單下
找到它，如下圖

然后你就可以去找相關教程了，以下是微軟官網的教程，大多數情況你可能還需要各種搜索

https://docs.microsoft.com/zh-cn/OfficeOnlineServer/office-online-server-overview

虛擬機安裝

https://www.jianshu.com/p/c67d103484a4

開源的文檔在線預覽方案 kkFileView

https://gitee.com/kekingcn/file-online-preview

效果預覽，分別是word、圖片和壓縮文件

總結

在線咨詢

上一篇：導航菜單根據選中的元素動態讓當前元素靠中顯示的方法
下一篇：20、描述一下 HTTP 的請求過程與原理（高薪常問

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Web開發中的文檔在線預覽解決方案，支持多種文件格式

什么會寫這篇文章？

常見的文檔預覽格式要求

微軟免費提供在線版本office預覽

自部署Office Online Server

開源的文檔在線預覽方案 kkFileView

總結

、前端實現pdf文件在線預覽功能

2、word、xls、ppt文件在線預覽功能

什么會寫這篇文章？

常見的文檔預覽格式要求

微軟免費提供在線版本office預覽

自部署Office Online Server

開源的文檔在線預覽方案 kkFileView

總結

您的項目需求

Web開發中的文檔在線預覽解決方案，支持多種文件格式

什么會寫這篇文章？

2、word、xls、ppt文件在線預覽功能

什么會寫這篇文章？