之前遇到很多各种文档在线阅览的需求,也有不少朋友经常问我这种需求的实现方案,大致试了一下网上的一些比较主流的推荐方案,但都不尽如人意,这里有一个比较全面的总结,需要的朋友可以根据自己的需求到这里查看,Office在线预览及PDF在线预览的实现方式大集合。本文选择功能比较强大,实现比较简单的一种方案,Aspose组件把Office及其PDF文档转换成HTML,然后进行查看。

  Aspose组件在处理Office及其PDF文档方面非常的强大,据说可以在没有安装Microsoft Office的机器上工作,所有的Aspose组件都是独立,不需要微软公司的授权,一般服务器或者普通电脑都装了office,这里也没有亲自在没有安装office的电脑上测试过,所以感兴趣的朋友可以自行测试。对应不同的文档,Aspose提供了不同的组件,如Aspose.Word、Aspose.Cells、Aspose.Slides、Aspose.Pdf等不同的组件用来处理Word/Excel/PPT/PDF等几种文档。Aspose支持的文档格式也非常丰富:Doc,Docx,RTF,HTML,OpenDocument,Excel,Ppt,PDF,XPS,EPUB和其他格式,同时支持不同文档类型之间的相互转换,允许创建,修改,提取,复制,分割,加入,和替换文件内容。但是也是收费软件,所以大家在使用的时候一定要慎重考虑,这里纯粹讨论它的功能效果。本文重点讨论文档在线阅览,对不同的文件类型,我们调用不同的组件可以将文档转换成image或者HTML。

  将文档转换成image查看的场景可能不是很多,所以这里只展示一下将word文档转换成Image的场景,其他如:Excel,PPT,PDF等转换成image查看的场景大家可以根据Aspose相关组件自行转换。其核心代码如下:

  1. public ActionResult GetDocumentData(string filePath, string sessionID)
  2. {
  3. // Common.SetWordsLicense();
  4. List<string> result = new List<string>();
  5. try
  6. {
  7. string documentFolder = AsposeWord.CreateTempFolders(filePath, sessionID);
  8. Aspose.Words.Document doc = new Aspose.Words.Document(filePath);
  9. Aspose.Words.Saving.ImageSaveOptions options = new Aspose.Words.Saving.ImageSaveOptions(Aspose.Words.SaveFormat.Jpeg);
  10. options.PageCount = ;
  11. ; i < doc.PageCount; i++)
  12. {
  13. options.PageIndex = i;
  14. doc.Save(string.Format(@"{0}\{1}.png", documentFolder, i), options);
  15. }
  16. result.Add(Common.Success);
  17. result.Add(doc.PageCount.ToString());
  18. var appPath = System.Web.HttpContext.Current.Server.MapPath("~");
  19. result.Add(documentFolder.Replace(appPath, "/").Replace("\\", "/"));
  20. }
  21. catch (Exception ex)
  22. {
  23. result.Clear();
  24. result.Add(Common.Error + ": " + ex.Message);
  25. }
  26. return Content(JsonConvert.SerializeObject(result));
  27. }

  最终效果图

  更多的开发者可能更喜欢将文档转换成HTML进行阅览,我们来看一下将office文档文档转换成html进行阅览的核心代码,根据文件的后缀名判断是用那种Aspose组件进行转换,然后对应创建该文件的HTML文档。

  1. public ActionResult GetAsposeOfficeFiles(string filePath, string sessionID, int pageIndex)
  2. {
  3. var pageView = false;
  4. var viewUrl = string.Empty;
  5. var result = new List<string>();
  6. var fileInfo = new FileInfo(filePath);
  7.  
  8. var hostName = HttpUtility.UrlPathEncode(filePath.Replace("\\", "//"));
  9. var webPath = Path.Combine(Common.PageDocumentDir, string.Format("Office/{0}.html", sessionID));
  10. var generateFilePath = Server.MapPath(webPath);
  11. try
  12. {
  13. if (fileInfo.Extension == ".xls" || fileInfo.Extension == ".xlsx" || fileInfo.Extension == ".doc"
  14. || fileInfo.Extension == ".docx" || fileInfo.Extension == ".ppt" || fileInfo.Extension == ".pptx")
  15. {
  16. #region 动态第一次生成文件
  17. if (!System.IO.File.Exists(generateFilePath))
  18. {
  19. if (fileInfo.Extension == ".doc" || fileInfo.Extension == ".docx")
  20. {
  21. Document doc = new Document(filePath);
  22. doc.Save(generateFilePath, Aspose.Words.SaveFormat.Html);
  23. }
  24. else if (fileInfo.Extension == ".xls" || fileInfo.Extension == ".xlsx")
  25. {
  26. Workbook workbook = new Workbook(filePath);
  27. workbook.Save(generateFilePath, Aspose.Cells.SaveFormat.Html);
  28. }
  29. else if (fileInfo.Extension == ".ppt" || fileInfo.Extension == ".pptx")
  30. {
  31. using (Aspose.Slides.Presentation pres = new Aspose.Slides.Presentation(filePath))
  32. {
  33. var a = pres.Slides.Count;
  34. HtmlOptions htmlOpt = new HtmlOptions();
  35. htmlOpt.HtmlFormatter = HtmlFormatter.CreateDocumentFormatter("", false);
  36. pres.Save(generateFilePath, Aspose.Slides.Export.SaveFormat.Html, htmlOpt);
  37. }
  38. }
  39. }
  40. #endregion
  41. viewUrl = webPath;
  42. }
  43. catch (Exception ex)
  44. {
  45. throw new Exception(ex.Message);
  46. }
  47. result.Add(false.ToString());
  48. result.Add(viewUrl);
  49. result.Add(pageView.ToString());
  50. result.Add(pageIndex.ToString());
  51. return Content(JsonConvert.SerializeObject(result));
  52. }

  最后就是通过Iframe调用生成的HTML查看效果:

  1. $.ajax({
  2. type: "POST",
  3. url: "/commons/Aspose/GetAsposeOfficeFiles",
  4. data: '{ filePath: "' + filePath + '" , sessionID: "' + guid() + '", pageIndex: "' + pageIndex + '" }',
  5. contentType: "application/json; charset=utf-8",
  6. dataType: "json",
  7. success: function (result) {
  8. //var officeInternetView = result[0];
  9. ];
  10. ];
  11. ];
  12.  
  13. var paging = $("#paging");
  14. if (pageView === "True") {
  15. paging[].style.display = "block";
  16. $(].value = tempPage;
  17. } else {
  18. paging[].style.display = "none";
  19. }
  20. $("#CurrentDocumentPage").attr("src", viewUrl);
  21. },

  对于比较大(如大于5M)的pdf文档一般都有数百页的内容了,对于这样的“大”文档一次性转换成HTML文档相对比较慢,所以我们通常会考虑到按指定页来转换,根据页码转换需要的哪一页,这样转换非常快,而且可以随意指定要查看那一页:

  1. else if (fileInfo.Extension == ".pdf")
  2. {
  3. && fileInfo.Length / / < )
  4. {
  5. var pdfDocument = new Aspose.Pdf.Document(filePath);
  6. pdfDocument.Save(generateFilePath, Aspose.Pdf.SaveFormat.Html);
  7. }
  8. )
  9. {
  10. pageIndex++;
  11. pageView = true;
  12. var pdfDocument = new Aspose.Pdf.Document(filePath);
  13. Aspose.Pdf.Document newDocument = new Aspose.Pdf.Document();
  14. newDocument.Pages.Add(pdfDocument.Pages[pageIndex]);
  15. newDocument.Save(generateFilePath, Aspose.Pdf.SaveFormat.Html);
  16.  
  17. }
  18. )
  19. {
  20. pageView = true;
  21. var pdfDocument = new Aspose.Pdf.Document(filePath);
  22. Aspose.Pdf.Document newDocument = new Aspose.Pdf.Document();
  23. newDocument.Pages.Add(pdfDocument.Pages[pdfDocument.Pages.Count]);
  24. newDocument.Save(generateFilePath, Aspose.Pdf.SaveFormat.Html);
  25. pageIndex = pdfDocument.Pages.Count;
  26. }
  27. else
  28. {
  29. pageView = true;
  30. var pdfDocument = new Aspose.Pdf.Document(filePath);
  31. && pageIndex < pdfDocument.Pages.Count)
  32. {
  33. Aspose.Pdf.Document newDocument = new Aspose.Pdf.Document();
  34. newDocument.Pages.Add(pdfDocument.Pages[pageIndex]);
  35. newDocument.Save(generateFilePath, Aspose.Pdf.SaveFormat.Html);
  36. }
  37. else
  38. {
  39. Aspose.Pdf.Document newDocument = new Aspose.Pdf.Document();
  40. newDocument.Pages.Add(pdfDocument.Pages[pdfDocument.Pages.Count]);
  41. newDocument.Save(generateFilePath, Aspose.Pdf.SaveFormat.Html);
  42. pageIndex = pdfDocument.Pages.Count;
  43. }
  44. }
  45. viewUrl = webPath;

上传文件:

  1. public ActionResult UploadFile()
  2. {
  3. HttpFileCollectionBase files = Request.Files;
  4. HttpPostedFileBase file = files["file1"];
  5. )
  6. {
  7. string fileName = file.FileName;
  8. )
  9. {
  10. fileName = fileName.Substring(fileName.LastIndexOf();
  11. }
  12. string path = Server.MapPath(Common.DataDir);
  13. try
  14. {
  15. file.SaveAs(path + fileName);
  16. ViewBag.message = "上传成功!";
  17. }
  18. catch (Exception e)
  19. {
  20. throw e;
  21. }
  22. }
  23. return RedirectToAction("Index", "../Home");
  24. }

下载

  1. function DownloadFile(row) {
  2. $.get("/commons/Aspose/DownloadFile?filePath=" + encodeURI(row.FullName),
  3. function (result) {
  4. location.href = result;
  5. });
  6. }
  7.  
  8. public string DownloadFile(string filePath, string sessionID)
  9. {
  10. var appPath = System.Web.HttpContext.Current.Server.MapPath("~");
  11. var result = filePath.Replace(appPath, "/").Replace("\\", "/");
  12. return result;
  13. }

  注意:在线阅览中,细心的朋友可能已经注意到了我的代码中有一个sessionID,每次阅览文件都会创建一个名为sessionID的文件夹,我想这一定不是大家所期望的,那用意何在在呢?实际上同一个文件我们只需要一次生成HTML文件就可以了,无需每次阅览都都重复生成这些文件。实际项目中,我们期望每上传一个文件就创建一个唯一的标示,这个标示跟对应文件之间建立某种关系,在线阅览的时候就根据这个唯一标识创建对应的HTML文件就可以了,这样,同一个文件在下一次阅览的时候先根据这个标示去检查对应的HTML文件是否存在,如果存在直接阅览就OK了,如果不存在,则先创建HTML文件,再进行阅览,另外时间比较仓促,本文的demo考虑不周,测试不足,可能有些小小的bug,大家在用的时候自行完善。

  一般这样的需求,比较完善一点就需要有文件上传,在线阅览,文件下载,文件删除,在线编辑等功能,前面几个功能也算是有比较完善的解决方案了,最后一个在线编辑还没有合适的解决方案,如果哪位朋友在web在线编辑方面有比较好的解决方案,请告诉我一下,接下来会花一定时间研究一下web在线编辑,可视化等,还望大家多多支持,有新的成果一定第一时间与大家分享。  

web文档在线阅览的更多相关文章

  1. WEB文档在线预览解决方案

    web页面无法支持预览office文档,但是却可以预览PDF.flash文档,所以大多数解决方案都是在服务端将office文档转换为pdf,然后再通过js的pdf预览插件(谷歌浏览器等已经原生支持嵌入 ...

  2. 最好用的js前端框架、组件、文档在线预览插件

    这里收集的都是个人认为比较好的js框架.组件 js前端ui框架 此处列举出个人认为最好的几个框架(排序即排名),现在好点的框架商用都需要付费,以下几个也不例外,但是由于组件丰富,都可以作为企业应用的完 ...

  3. sharepoint 2013 office web app 2013 文档在线浏览 IE11 浏览器不兼容解决方法

    昨晚配置完成office web apps 2013的外部网络访问之后,今天发现了一个很奇怪的问题,就是IE 11不支持文档在线浏览,找了很多方法,打补丁什么的,都不管用,最后在预览文件的页面,看到& ...

  4. Java+FlexPaper+swfTools仿百度文库文档在线预览系统设计与实现

    笔者最近在给客户开发文档管理系统时,客户要求上传到管理系统的文档(包括ppt,word,excel,txt)只能预览不允许下载.笔者想到了百度文库和豆丁网,百度文库和豆丁网的在线预览都是利用flash ...

  5. Java+FlexPaper+swfTools 文档在线预览demo

    1.概述 主要原理 1.通过第三方工具openoffice,将word.excel.ppt.txt等文件转换为pdf文件 2.通过swfTools将pdf文件转换成swf格式的文件 3.通过FlexP ...

  6. asp.net如何实现word文档在线预览

    原文:asp.net如何实现word文档在线预览 实现方式:office文档转html,再在浏览器里面在线浏览 1.首先引入com组件中office库,然后在程序集扩展中引入word的dll 2.将M ...

  7. Office文档在线编辑的实现之二

    讲述了如何通过iis的webdav支持实现客户端的office直接编辑服务器上的文件,本篇将讲解如何实现客户端的office直接编辑数据库中的二进制形式保存的office文件. 实现的关键:模拟IIS ...

  8. 文档在线预览开源实现方案二:OpenOffice + pdf.js

    文档在线预览的另一种实现方式采用的技术栈是OpenOffice + pdf.js, office文档转换为pdf的工作依然由OpenOffice的服务来完成,pdf生成后我们不再将其转换为其他文件而是 ...

  9. 文档在线预览开源实现方案一:OpenOffice + SwfTools + FlexPaper

    在文档在线预览方面,项目组之前使用的是Microsoft office web apps, 由于该方案需要按照微软License付费,项目经理要我预研一个文档在线预览的开源实现方案.仔细钻入该需求发现 ...

随机推荐

  1. Apache的Order Allow,Deny 详解

    Allow和Deny可以用于apache的conf文件或者.htaccess文件中(配合Directory, Location, Files等),用来控制目录和文件的访问授权. 所以,最常用的是: O ...

  2. java 把一个文件夹里图片复制到另一个文件夹里

    import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.ut ...

  3. 使用ImitateLogin模拟登录百度

    在之前的文章中,我已经介绍过一个社交网站模拟登录的类库:imitate-login ,这是一个通过c#的HttpWebRequest来模拟网站登录的库,之前实现了微博网页版和微博Wap版:现在,模拟百 ...

  4. gvim的菜单乱码解决方法

    gvim的菜单乱码解决方法: (乱码是由于系统内码不兼容导致,系统内码包括gb2312 gb18030 utf-8 utf-16[unicode]等) 生成文件 ~/.gvimrc 并添加如下语句:s ...

  5. andriod fragment调用Activity函数方法

    (1)新增一个activity public MainActivity getMainActivity(); } (2)在MainActivity 的Java文件中增加 getMainActivit公 ...

  6. linux基础-基本命令的讲解(1-7单元)

    基本命令的讲解 主要内容介绍 1.LINUX操作系统安装及初始化配置(熟悉):2.LINUX操作系统目录组成结构及文件级增删改查操作(重点):3.LINUX操作系统用户.权限管理(重点):4.开源软件 ...

  7. 地图编辑器V3

    V3.2.4 (2014-07-03) ---------------------------1. 保存地图的锁定与可视状态:2. 地图单独存为map格式结尾的文件与导出的XML文件区别:3. 修正瓷 ...

  8. netbeans打包成jar

    文件页里找到build.xml文件,打开在</project>前 加入以下代码保存之 按 Ctrl+C 复制代码 <target name="package-for-sto ...

  9. 仿哔哩哔哩应用客户端Android版源码项目

    这是一款高仿哔哩哔哩安卓客户端,跟官方网的差不多吧,界面也几乎是一样的,应用里面也加了一些弹出广告,大家可以参考一下吧,安装测试包在源码文件那里,大家可以多多参考一下. 哔哩哔哩弹幕网是国内知名的弹幕 ...

  10. sql中视图的作用

    视图是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在.行和列数据来自由定义视图的查询所引用的表,并且在引用视图时动态 ...