1. 程式人生 > >基於MVC4+EasyUI的Web開發框架經驗總結(8)--實現Office文件的預覽

基於MVC4+EasyUI的Web開發框架經驗總結(8)--實現Office文件的預覽

在部落格園很多文章裡面,曾經有一些介紹Office文件預覽檢視操作的,有些通過轉為PDF進行檢視,有些通過把它轉換為Flash進行檢視,但是過程都是曲線救國,真正能夠簡潔方便的實現Office文件的預覽的還是比較少,這裡的Office文件包括了Word、Excel、PPT文件。本文介紹兩種方式,一種方式是通過線上預覽的方式,利用微軟的平臺進行Office文件的線上檢視;一種是把Office文件生成HTML檔案後進行檢視。然後對比他們的優缺點,並進行總結。

1、利用微軟的平臺進行Office文件的線上檢視

 一直以來,都希望找一個合適的Office文件檢視的控制元件或者解決方案,這樣客戶在使用系統的時候,可以直接檢視預覽一些文件,而不需要安裝Office,或者下載到本地在檢視。

使用瀏覽器直接檢視Office文件的連結地址格式如下所示:

這個連結分為了兩部分,一部分是http://view.officeapps.live.com/op/view.aspx?src=,後面那個是具體的文件地址,用URLEncode進行處理的連結地址。

非常酷的效果,使用這個服務唯一的要求就是你的網站是部署在網際網路上的,這樣服務才可以呼叫你的文件地址然後進行展示。

這個是使用微軟的預覽Office服務,當然你可以部署自己的Office預覽服務,也就是需要安裝Office Web Apps服務(系統要求為Windows Server 2012)

一般情況下,Office Web Apps要與其他應用配合使用,如下圖所示(看起來還是很複雜的,這些東西好像也要獨立安裝在不同的機器):

clip_image035

好在微軟給我們提供了線上的Office文件預覽服務,其實好像Google Doc Viewer也是可以的,但是已經不可使用了。這樣,我們就可以利用公開的介面地址實現Office文件的線上預覽了。

以常用的Excel文件為例,它可以提供了完美的線上預覽效果。

 

我們還注意到上面有一排選單,可以展開進行相關功能的操作,尤其是文件的下載和列印很吸引。

 

這樣我們就可以在我們的文件預覽操作頁面上進行集成了,下面是我在我的《基於MVC4+EasyUI的Web開發框架》整合的一個例子,對Office文件進行檢視

 感覺效果還不錯吧。

Word文件也是可以順利進行預覽,但是就沒有列印和下載的功能了,不過預覽的效果還是很不錯的。

2、把Office文件生成HTML檔案後進行檢視

上面說了,使用線上的Office預覽服務來檢視Office文件,如果我們的管理系統是在區域網內跑的應用,那麼我們就是用不了了,那麼我們如果需要使用這種線上預覽Office文件的服務,應該如何操作呢?

雖然自行搭建Office Web Apps服務應用可以解決這個問題,但是一般來說,搭建這樣的平臺環境,太過繁瑣和昂貴了,有沒有更好的方式實現Office文件的檢視呢?

有的,下面我來介紹一下,如何使用Aspose元件把Office文件生成HTML,然後進行檢視的做法。

對應不同的Office文件,Aspose提供了不同的元件,如Aspose.Word、Aspose.Cells、Aspose.Slides等不同的元件用來處理Word/Excel/PPT等幾種文件。

我們知道,Aspose元件在處理Office文件方面非常的強大,但是也是收費軟體,所以需要可以購買支援,但是我們這裡純粹討論它的功能效果。

對不同的檔案型別,我們呼叫不同的元件進行HTML的轉換就可以了,核心部分程式碼如下所示。

                            if (ext == "doc" || ext == "docx")
                            {
                                Aspose.Words.Document doc = new Aspose.Words.Document(templateFile);
                                doc.Save(generateFilePath, Aspose.Words.SaveFormat.Html);
                            }
                            else if (ext == "xls" || ext == "xlsx")
                            {
                                Workbook workbook = new Workbook(templateFile);
                                workbook.Save(generateFilePath, SaveFormat.Html);
                            }
                            else if (ext == "ppt" || ext == "pptx")
                            {
                                templateFile = templateFile.Replace("/", "\\");
                                PresentationEx pres = new PresentationEx(templateFile);
                                pres.Save(generateFilePath, Aspose.Slides.Export.SaveFormat.Html);
                            }

這樣,我們第一次使用的時候,判斷目錄裡面是否有對應的HTML檔案了,如果沒有,就使用上面的程式碼生成就可以了,檢視的時候,就返回對應的路徑給客戶端進行檢視檔案就可以了。

下面是幾個文件的效果截圖,供參考。

3、整合線上和本地生成檔案兩者的預覽方式

我們在做專案的時候,往往不知道具體的應用是部署在公網(網際網路)的環境,還是在區域網的環境,因此要求我們很多功能需要有一定的彈性,如果能夠使用公網網的,利用公網微軟的Office預覽功能,呈現出來的效果比使用aspose元件生成的效果更好,有時候使用aspose元件生成的文件,格式可能有一些不太一樣(雖然總體還好)。

因此,如果能夠根據需要,對兩者能夠配置一下,進行切換,應該是比較理想的方案。

下面是我根據需要對它們兩者的預覽方案進行了整合,通過一個變數進行切換,當然,變數可以寫到配置檔案裡面,這樣以後也可以不同修改程式碼就可以自由切換了。

                bool officeInternetView = false;//是否使用網際網路線上預覽
                string hostName = HttpUtility.UrlPathEncode("http://www.iqidi.com/");//可以配置一下,如果有必要

                if (ext == "xls" || ext == "xlsx" || ext == "doc" || ext == "docx" || ext == "ppt" || ext == "pptx")
                {
                    if (officeInternetView)
                    {
                        //返回一個微軟線上瀏覽Office的地址,需要加上網際網路域名或者公網IP地址
                        viewUrl = string.Format("http://view.officeapps.live.com/op/view.aspx?src={0}{1}", hostName, filePath);
                    }
                    else
                    {
                        #region 動態第一次生成檔案
                        //檢查本地Office檔案是否存在,如不存在,先生成檔案,然後返回路徑供檢視
                        string webPath = string.Format("/GenerateFiles/Office/{0}.htm", info.ID);
                        string generateFilePath = Server.MapPath(webPath);
                        if (!FileUtil.FileIsExist(generateFilePath))
                        {
                            string templateFile = BLLFactory<FileUpload>.Instance.GetFilePath(info);
                            templateFile = Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory, templateFile.Replace("\\", "/"));

                            if (ext == "doc" || ext == "docx")
                            {
                                Aspose.Words.Document doc = new Aspose.Words.Document(templateFile);
                                doc.Save(generateFilePath, Aspose.Words.SaveFormat.Html);
                            }
                            else if (ext == "xls" || ext == "xlsx")
                            {
                                Workbook workbook = new Workbook(templateFile);
                                workbook.Save(generateFilePath, SaveFormat.Html);
                            }
                            else if (ext == "ppt" || ext == "pptx")
                            {
                                templateFile = templateFile.Replace("/", "\\");
                                PresentationEx pres = new PresentationEx(templateFile);
                                pres.Save(generateFilePath, Aspose.Slides.Export.SaveFormat.Html);
                            }
                        }
                        #endregion
                        viewUrl = webPath;
                    }
                }
                else
                {
                    viewUrl = filePath;
                }

最後,我在附件管理模組裡面實現所有文件的顯示,對Office文件和圖片文件都可以進行預覽,以及其他文件進行下載的操作。

後面進一步介紹一下Web框架上的附件管理模組的操作功能。

基於MVC4+EasyUI的Web開發框架的系列文章:

相關推薦

基於MVC4+EasyUI的Web開發框架經驗總結8--實現Office

在部落格園很多文章裡面,曾經有一些介紹Office文件預覽檢視操作的,有些通過轉為PDF進行檢視,有些通過把它轉換為Flash進行檢視,但是過程都是曲線救國,真正能夠簡潔方便的實現Office文件的預覽的還是比較少,這裡的Office文件包括了Word、Excel、PPT文件。本文介紹兩種方式,一種方式是通過

基於MVC4+EasyUI的Web開發框架經驗總結8--實現Office檔的

討論 off info code .cn viewer 存在 nco app http://www.cnblogs.com/wuhuacong/p/3871991.html 基於MVC4+EasyUI的Web開發框架經驗總結(8)--實現Office文檔的預覽

基於MVC4+EasyUI的Web開發框架經驗總結7--實現省份、城市、行政區三者聯動

為了提高客戶體驗和進行一些技術探索,現在正準備把我自己的客戶關係管理系統CRM在做一個Web的版本,因此對基於MVC的Web介面繼續進行一些研究和優化,力求在功能和介面上保持和Winform一致,本文主要介紹在我的CRM系統中用到的全國省份、城市、行政區三者的兩種效果,在Winform上實現沒問題,在Web上

基於Metronic的Bootstrap開發框架經驗總結17-- 使用 summernote插實現HTML檔的編輯和圖片插入操作

系統 cat 寫入 視頻 編寫 查看 absolute upload form 在很多場合,我們需要在線編輯HTML內容,然後在頁面上或者其他終端上(如小程序、APP應用等)顯示,編輯HTML內容的插件有很多,本篇介紹基於Bootstrap的 summernote插件實現H

基於Metronic的Bootstrap開發框架經驗總結9--實現Web頁面內容的列印和儲存操作

在前面介紹了很多篇相關的《Bootstrap開發框架》的系列文章,這些內容基本上覆蓋到了我這個Bootstrap框架的各個主要方面的內容,總體來說基本達到了一個穩定的狀態,隨著時間的推移可以會引入一些更好更新的內容進行完善,本篇繼續這個系列,主要介紹如何實現Web頁面內容的列印預覽和儲存操作。 1、Web頁

基於Metronic的Bootstrap開發框架經驗總結8--框架功能總體介面介紹

在前面介紹了一系列的《基於Metronic的Bootstrap開發框架經驗總結》的隨筆文章,隨筆主要是介紹各個知識點的內容,對框架的總體性介面沒有很好的闡述,本篇隨筆主要介紹這個Bootstrap框架的總體性功能介面,介紹其中用到的知識點和整體性的介面。希望讀者對框架有一個更加直觀、真實的認識瞭解,介面設計以

基於Metronic的Bootstrap開發框架經驗總結9--實現Web頁面內容的打印和保存操作

復制 metronic ports 分享 idt details func git 獲取 在前面介紹了很多篇相關的《Bootstrap開發框架》的系列文章,這些內容基本上覆蓋到了我這個Bootstrap框架的各個主要方面的內容,總體來說基本達到了一個穩定的狀態,隨著時間的推

基於MVC4+EasyUI的Web開發框架經驗總結5--使用HTML編輯控CKEditor和CKFinder

err config 兩個 腳本 web開發 upload asp 正常 初始 http://www.cnblogs.com/wuhuacong/p/3780356.html Web開發上有很多HTML的編輯控件,如CKEditor、kindeditor等等,很多都做的很

基於MVC4+EasyUI的Web開發框架經驗總結2- 使用EasyUI的樹控構建Web界面

set 應用 get ember trim ase str zab ble http://www.cnblogs.com/wuhuacong/p/3669575.html 最近花了不少時間在重構和進一步提煉我的Web開發框架上,力求在用戶體驗和界面設計方面,和Winfor

基於MVC4+EasyUI的Web開發框架經驗總結6--在頁面中應用下拉列表的處理

ica new web開發 don ext images 如果 bob 獲取 http://www.cnblogs.com/wuhuacong/p/3840321.html 在很多Web界面中,我們都可以看到很多下拉列表的元素,有些是固定的,有些是動態的;有些是字典內容,

基於MVC4+EasyUI的Web開發框架經驗總結1-利用jQuery Tags Input 外掛顯示選擇記錄

最近花了不少時間在重構和進一步提煉我的Web開發框架上,力求在使用者體驗和介面設計方面,和Winform開發框架保持一致,而在Web上,我主要採用EasyUI的前端介面處理技術,走MVC的技術路線,在重構完善過程中,很多細節花費不少時間進行研究和提煉,一步步走過來,也積累了不

基於MVC4+EasyUI的Web開發框架經驗總結3- 使用Json實體類構建選單資料

最近花了不少時間在重構和進一步提煉我的Web開發框架上,力求在使用者體驗和介面設計方面,和Winform開發框架保持一致,而在Web上,我主要採用EasyUI的前端介面處理技術,走MVC的技術路線,在重構完善過程中,很多細節花費不少時間進行研究和提煉,一步步走過來,也積累了不少經驗,本系列將主要介紹我在進一步

基於MVC4+EasyUI的Web開發框架經驗總結13--DataGrid控制元件實現自動適應寬頻高度

在預設情況下,EasyUI的DataGrid好像都沒有具備自動寬度的適應功能,一般是指定畫素寬度的,但是使用的人員計算機的螢幕解析度可能不一樣,因此導致有些地方顯示太大或者太小,總是不能達到好的預期效果,如果DataGrid能夠根據視窗尺寸進行伸縮,效果應該好很多。本文主要介紹DataGrid控制元件實現自動

基於MVC4+EasyUI的Web開發框架經驗總結4--使用圖表控制元件Highcharts

在我們做各種應用的時候,我們可能都會使用到圖表統計,以前接觸過一些不同的圖表控制元件,在無意中發現了圖表控制元件Highcharts,其強大的功能和豐富的互動效果,令人難以忘懷。本篇主要介紹在Web開發中使用圖表控制元件Highcharts,以及對其進行統一漢化等操作,讓我們的程式功能更加豐富,內容更加美觀。

基於MVC4+EasyUI的Web開發框架經驗總結2- 使用EasyUI的樹控制元件構建Web介面

最近花了不少時間在重構和進一步提煉我的Web開發框架上,力求在使用者體驗和介面設計方面,和Winform開發框架保持一致,而在Web上,我主要採用EasyUI的前端介面處理技術,走MVC的技術路線,在重構完善過程中,很多細節花費不少時間進行研究和提煉,一步步走過來,也積累了不少經驗,本系列將主要介紹我在進一步

基於MVC4+EasyUI的Web開發框架經驗總結6--在頁面中應用下拉列表的處理

在很多Web介面中,我們都可以看到很多下拉列表的元素,有些是固定的,有些是動態的;有些是字典內容,有些是其他表裡面的名稱欄位;有時候引用的是外來鍵ID,有時候引用的是名稱文字內容;正確快速使用下拉列表的處理,可以提高我們程式介面的美觀性和友好型,本文主要介紹在我的Web開發框架以及相關的擴充套件Web應用中用

基於MVC4+EasyUI的Web開發框架經驗總結14--自動生成圖示樣式檔案和圖示的選擇操作

在很多Web系統中,一般都可能提供一些圖示的選擇,方便配置按鈕,選單等介面元素的圖示,從而是Web系統介面看起來更加美觀和協調。但是在系統中一般內建的圖示樣式相對比較有限,而且硬編碼寫到樣式表裡面,這樣給我們擴充套件使用有很多的不方便。基於這個原因,我想如果能夠獨立一個模組,自動根據圖示生成圖示CSS樣式檔案

基於MVC4+EasyUI的Web開發框架經驗總結9--在Datagrid裡面實現外來鍵欄位的轉義操作

我們在使用EasyUI的時候,很多情況下需要使用到表格控制元件datagrid,這個控制元件控制元件非常強大,使用起來很簡潔,但是我在使用中,發現對於一個表裡面的外來鍵欄位進行轉義,並顯示引用表的一些名稱的操作,卻顯得比較難以實現,找了很多資料,基本上沒有找到對應的解決方案。本文主要介紹我對這種外來鍵欄位轉義

基於MVC4+EasyUI的Web開發框架經驗總結11--使用Bundles處理簡化頁面程式碼

在Web開發的時候,我們很多時候,需要引用很多CSS檔案、JS檔案,隨著使用更多的外掛或者獨立樣式檔案,可能我們的Web介面程式碼會越來越臃腫,看起來也很累贅,在MVC裡面提供了一個Bundle的物件,用來簡化頁面程式碼非常方便,本文主要介紹在我的MVC框架裡面,如何使用bundles來簡化頁面的程式碼的。

基於MVC4+EasyUI的Web開發框架經驗總結5--使用HTML編輯控制元件CKEditor和CKFinder

Web開發上有很多HTML的編輯控制元件,如CKEditor、kindeditor等等,很多都做的很好,本文主要介紹在MVC介面裡面,CKEditor的配置和使用。CKEditor的前身是FCKEditor,隨著它的更新,上傳圖片的功能被分離出去了,現在如果需要實現上傳圖片,要麼自己寫程式碼或者採用其他上傳控