KKFileView前端实现Word，Excel，PPT在线预览（实测可用于内网项目） |
您所在的位置：网站首页 › excel可以打开html文件吗 › KKFileView前端实现Word，Excel，PPT在线预览（实测可用于内网项目） |
KKFileView前端实现Word，Excel，PPT在线预览（实测可用于内网项目）
|
目前网上现有的文件在线预览方式有以下几种： 1、通过a标签href属性直接打开文件 这种方式是通过把文件上传到服务器，在后台将文件转为pdf。通过浏览器可直接查看pdf文件的特点使用a标签直接就可以打开预览。 缺点就是需要手动将文件转为pdf文件 还有涉及到编码及内容乱码问题。 2、通过jquery插件jquery.media.js实现 这个插件可以实现pdf预览功能(包括其他各种媒体文件)但是对word等类型的文件无能为力。 3、直接通过页面内嵌iframe 对页面的UI和内容展示实现不太好，类似于a标签查看pdf还可以。 4、使用微软在线预览接口 这种也是比较方便和常用的一种方式，word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提：资源必须是公共可访问的)。如果项目是要部署在内网下使用那就无能为力了。 以上这几种在线预览的方式虽然都能实现需求 但是都各自有各自的局限性。 本次我采用的是 KKFileView 第三方工具来实现在线预览，主要考虑到了两个因素：1、项目是内网的项目资源文件不能公共访问。2、预览的文件类型不一致； KKFileView是基于SpringBoot和OpenOffice编写的文件转换和在线预览工具； 使用方式也非常简单，官方提供打包好的服务及配置只需要把他部署在服务器上就可以使用了。并且他是免费开源的。 kkFileView是git的开源（不花钱）在线预览项目 支持格式：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/releases 可以在以上地址下载到windows版本和linux版本 源码也可下载。
注：Windows版自带openOffice，所以不需要自己再手动安装。
前台只需要在预览的方法中调用服务即可： 注：文件的请求地址需要用restful的格式，而不能用key=value的拼接形式；并且还需要以文件格式的拓展名结尾（后台接口接收可以不使用，但是必须有一个参数来放文件拓展名）。要预览word就要以docx/doc 预览excel就要以xls/xlsx结尾，kkFileView要以请求地址中的拓展名判断要预览那种类型的文件。 文件的请求地址必须是 直接在浏览器上请求可以下载的那种。 //要预览文件的访问地址,访问项目可以将文件下载的地址； var url = 'http://127.0.0.1:8080/file/test.docx'; //调用本地的kkFileView服务即可达到预览的效果 window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(url)); //带有水印的预览 //window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(url))+'&watermarkTxt=测试水印';后台需要编写文件下载接口： @RequestMapping("/file/{fileName}") public void viewOfdDoc(@PathVariable("fileName")String fileName, HttpServletRequest req, HttpServletResponse response) throws IOException { // 获取upload文件夹真实路径 String upload = req.getServletContext().getRealPath("/upload"); // 获取上传文件实 // 拼接路径创建File对象 File file = new File(upload + "/reference-file/公司各部门检查评估记录表.docx"); InputStream inputStream = new FileInputStream(file); OutputStream outputStream = response.getOutputStream(); response.setContentType("application/x-download"); response.addHeader("Content-Disposition","attachment;filename="+ new String("公司各部门检查评估记录表.docx".getBytes("UTF-8"),"iso-8859-1")); IOUtils.copy(inputStream,outputStream); outputStream.flush(); }到此 一个完整的内网文件在线预览功能就完成了。 遇到的问题： 1、接口权限问题： 在搭建测试的过程中发现路径明明是完整的可以在浏览器上访问的，发现放到KKFileView中就是不行。后来发现是项目中有浏览器 而该接口访问的时候被拦截了。因为把文件请求的路径给KKFileView，他就会请求该地址去下载文件。需要把项目中的文件预览接口放开 2、预览word文件部门字体乱码： 成功在本地实现预览后，放到服务器上测试发现预览一篇word 其中部门内容全是一些小方块 。这是因为服务器字体不全从而导致的，KKFileView在转换的时候拿不到想要的字体会乱码。根据官网提供的字体包安装后还是不行。 最终的解决方案是：将linux服务器上的字体包全部卸载删除，将Windows上的字体包全部安装到linux上同时把官网提供的常用字体包也可以安装上去（这块关于Linux字体的操作具体可参考网上其他文章，或官网的文档）。然后重启一下kkFileView服务就OK了。 附： kkFileView和OpenOfice已整理好对应的版本和文件 CSDN资源：https://download.csdn.net/download/qq_44322555/16091892 网盘： https://pan.baidu.com/s/1FqJnDRU1kqDBOkamkzjqZg 提取码：yln0 |
Windows目录，进入到bin下 点击startup.bat执行脚本就可以启动，默认端口是8012；启动成功后访问127.0.0.1：8012就可以看到测试主页了。 虽然windows版中也有linux的启动脚本 但是不建议将Windows版放到linux中使用sh脚本启动。
这个是linux安装目录 初始时没有file目录 file目录是预览文件的缓存目录。 启动方式就是进入bin目录 执行startup.sh脚本 可以看到linux没有自带openOffice，一般首次启动会自动下载安装。但是会遇到无法自动安装的情况，这时候自己手动安装一下 启动后再启动该服务就行了。 OpenOffice下载地址：http://www.openoffice.org/zh-cn/download/ 选择对应的版本下载即可； 具体的安装方法可参考：Linux安装openoffice：https://blog.csdn.net/github_38924695/article/details/89470960 
服务配置好接下来就是使用了。【本文地址】
今日新闻 |
推荐新闻 |