实现在线预览office文档(word,excel,ppt)的几种方法

(177) 2024-05-04 17:57:14

在日常的生活或者工作中,我们都会用到office文档,但是在大多数人们阅读文档的时候,并不想将网站上的office文档下载到本地,这时候就需要文档在线预览的功能。

一些博主知道的实现文档在线预览的方式

1、转换为PDF

2、转换为HTML

3、在服务器上自己部署服务

4、开源项目提供的功能

5、使用第三方提供的付费接口


 2021-05-27更新,最近在逛gitee的时候,发现了这个开源的,完全符合我需求的项目,泪目了,家人们

 话不多说,先挂链接  kkFileView 

该项目是使用spring boot打造文件文档在线预览项目解决方案,支持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等文件在线预览。

项目特性

  1. 支持 office, pdf, cad 等办公文档
  2. 支持 txt, xml(渲染), md(渲染), java, php, py, js, css 等所有纯文本
  3. 支持 zip, rar, jar, tar, gzip 等压缩包
  4. 支持 jpg, jpeg, png, gif, tif, tiff 等图片预览(翻转,缩放,镜像)
  5. 使用 spring-boot 开发,预览服务搭建部署非常简便
  6. rest 接口提供服务,跨语言、跨平台特性(java,php,python,go,php,....)都支持,应用接入简单方便
  7. 抽象预览服务接口,方便二次开发,非常方便添加其他类型文件预览支持
  8. 最最重要 Apache 协议开源,代码 pull 下来想干嘛就干嘛

感谢作者及贡献者们的开源

这个项目搭建及使用都非常简单,将作者发布的最新源码使用maven构建打包,在生成包目录kekingcn-file-online-preview-v3.5.1\file-online-preview\server\target\kkFileView-3.5.1\bin下,双击运行startup.bat即可运行服务(需要Java环境的支持)


一、在后台将office文档转换为pdf,然后在浏览器中或者插件中查看

  1、使用apache openoffice,下载地址:Apache OpenOffice - 下载

   Java实现参考:web使用openoffice实现在线预览office文档_open office预览-CSDN博客

  2、使用Asponse组件进行转换(优点:无需安装任何软件,直接引用即可使用,缺点:正式版收费,不过有试用版,除此之外,部分文档转换出来后样式错乱)

  下载地址:ASPOSE —正版控件、控件购买、控件下载、控件价格、控件销售、控件代理、控件授权、控件技术支持尽在控件中国网

   以转换word文件为PDF文件为例的c#实现代码

//文件位置
string FilePath="D://FilePath//test.doc"

//指定转换后的pdf文件存储路径
string savepath=System.Web.Hosting.HostingEnvironment.MapPath("/myPath/"+DateTime.Now.ToString("yyMMddHHmmssff")+".pdf");

//使用Asponse.word的方法进行转换
Document doc = new Document(path);
doc.Save(savepath,Asponse.Words.SaveFormat.Pdf);

转换为pdf之后,可以直接使用c#文件读取流将文件以pdf流的形式在浏览器中预览

//直接读取文件流到浏览器展示
FileStream fs = new FileStream(path,FileMode.Open);
byte[] buffer = new byte[fs.Length];
fs.Seek(0,SeekOrigin.Begin);
fs.Read(buffer,0,buffer.Length);
fs.Flush();
fs.Close();

context.Response.ContenType="application/PDF";
context.Response.BinaryWrite(buffer);
context.Response.Flush();
context.Response.End();

   也可使用pdf插件进行预览,例如PDF.js

    pdf.js下载地址:PDF.js

    PDF.js支持

    指定文件地址的预览方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文件预览</title>
        <script src="../javascript/jquery-2.2.4.js"></script>
        <script type="text/javascript">
            $(function () {
                var url = getPdfPreviewUrl(); //获取pdf预览地址
                $("#pdfContainer").attr("src", "../static/pdfjs/web/viewer.html?file="+url+"#page=1");
            });
        </script>
    </head>
    <body>
        <div id="showPdf">
            <iframe id="pdfContainer" src="" width="100%" frameborder="0"></iframe>
        </div>
    </body>
</html>

     以文件流的形式展示

1、打开viewer.js,搜索defaultUrl,修改为如下形式
 defaultUrl
{
    value:DEFAULT_URL;
    kind:OptionKind.VIEWER
}

2、在viewer.html中,新增<Script></Script>,注意要在Viewer.js的引用之前
<Script>
    var DEFAULT_URL="";
    VAR CMAPS_URL="../../pdfjs_es5/web/cmaps";//这句代码引用的cmaps包是为了解决部分类型的pdf文件显示不全的问题,例如发票的pdf图片
    var PDFData = "";
    $.ajax({
       type:"post",
       async:false,
       mimeType:'text/plain;chartset=x-user-defined',
       url:"自己的后台请求路径",
       success:function(data){
         PDFData = data;
       }
    })

    var rawLength = PDFData.length;
    //将数据流转换为pdf.js能解析的unit8Array类型
    var array = new Unit8Array(new ArrayBuffer(rawLength));
    for(let i=0;i<rawLength;i++){
        array[i] = PDFData.charCodeAt(i) & 0xff;
    }
    DEFAULT_URL=array;
</Script>

 二、将PDF文件转换为html后进行展示,这个方法好像有很多,大家可以自行搜索

      1、博主看过的一篇参考文章:c#实现参考:https://www.cnblogs.com/wangxlei/p/9396196.html

      2、配合上文提到过的openoffice,也可实现这样的效果,在下文中,有一个开源项目就是使用该方式实现。

三、自己部署服务

      1、office online 2016,优点:免费,可在内网部署;缺点:比较复杂与麻烦,不适合个人使用

  由于博主没有自己搭建过,所以也没有相关的经验,给大家分享我看过的几篇文章

         搭建教程:

            1、https://www.cnblogs.com/lhxsoft/p/12071215.html

            2、微软 Office Online Server 2016 服务安装部署 + wopi代码实现_office online server 免费吗-CSDN博客

         文档:

     1、OfficeOnlineServer Netnr Doc

2、Collabora online

参考:Nextcloud文档在线协作collabora online 服务的部署 - 简书

四、开源项目

       给大家推荐几个博主搭建过或尝试过的优秀开源项目

      1、配合openoffice实现文档的在线预览,实现本地文档添加,文档转换为html,文档HTML方式预览,可以实现预览的文档:doc、docx、ppt、pptx、xls、xlsx、zip、rar

           码云仓库地址:WDA文件在线预览: 配合openoffice实现文档的在线预览,实现本地文档添加,文档转换为html,文档HTML方式预览,可以实现预览的文档:doc、docx、ppt、pptx、xls、xlsx、zip、rar

      2、使用spring boot打造文件文档在线预览项目解决方案,支持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等文件在线预览

          码云仓库地址:kkFileView: 使用spring boot打造文件文档在线预览项目解决方案,支持doc、docx、ppt、pptx、wps、xls、xlsx、zip、rar、ofd、xmind、bpmn 、eml 、epub、3ds、dwg、psd 、mp4、mp3以及众多类文本类型文件在线预览

     3、文档在线预览编辑,文档水印 / Office files preview or edit online, doc/docx convert to html, watermark

          GitHub仓库地址:GitHub - ekoz/kbase-doc: 文档在线预览编辑,文档水印 / Office files preview or edit online, doc/docx convert to html, watermark

     4、onlyoffice 毕升解决方案。毕升文档在线文件服务部分的Office在线编辑预览使用优秀的开源项目onlyOffice,根据开源协议我们将毕升修改过的sdkjs进行开源。另外毕升文档重新             设计only Office UI交互以及彻底重写服务器。

         GitHub仓库地址:GitHub - ibisheng/onlyoffice-ibisheng: onlyoffice 毕升解决方案。毕升文档在线文件服务部分的Office在线编辑预览使用优秀的开源项目onlyOffice,根据开源协议我们将毕升修改过的sdkjs进行开源。另外毕升文档重新设计only Office UI交互以及彻底重写服务器。

五、第三方收费服务

   这类服务有很多,大家可以结合自己的实际需求选择,我给大家例举几个常见的

   1、百度智能云文档服务:文档服务_文档服务管理_文档转换-百度智能云

   2、腾讯在线文档:腾讯文档-官方网站-支持多人在线编辑Word、Excel和PPT文档

 

THE END

发表回复