Spring Boot搭建的一个在线文件预览系统

昨晚搭建环境都花了好一会时间 , 主要在浪费在了安装 OpenOffice 这个依赖环境上(Mac 需要手动安装) 。
然后 , 又一步一步功能演示 , 记录 , 调试项目 , 并且简单研究了一下核心代码之后才把这篇文章写完 。 因此 , 这篇文章我还会简单分析一下项目核心代码 。
项目介绍官方是这样介绍 kkFileView 的:
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 等文件在线预览
简单来说 kkFileView 就是常见的文件类型的在线预览解决方案 。
总的来说我觉得 kkFileView 是一个非常棒的开源项目 , 在线文件预览这个需求非常常见 。 感谢开源!
下面 ,我站在一个“上帝”的角度从多个维度来评价一下 kkFileView:

  1. 代码质量一般 , 有很多可以优化的地方比如:
  2. Controller 层代码嵌套太多逻辑
  3. 没有进行全局异常处理(代码中是直接返回错误信息的 json 数据给前端 , 我并不推荐这样做)
  4. 返回值不需要通过ObjectMapper转换为 JSON 格式(ResponseEntity+@RestController 就行了)
  5. ......
  6. 使用的公司比较多 , 说明项目整体功能还是比较稳定和成熟的!
  7. 代码整体逻辑还是比较清晰的 , 比较容易看懂 , 给作者们点个赞!
环境搭建克隆项目通过以下命令即可将项目克隆到本地:
git clone 安装 Openofficeoffice 类型的文件的预览依赖了 OpenOffice, 所以我们首先要安装 OpenOffice(Windows 下已内置 , Linux 会自动安装 , Mac OS 下需要手动安装) 。
下面演示一下如何在 Mac 上安装 OpenOffice 。
你可以通过以下命令安装最新版的 OpenOffice:
brew cask install openoffice不过 , 这种方式下载可能会比较慢 , 你可以直接去官网下载 dmg 安装包 。
官方下载地址:
Spring Boot搭建的一个在线文件预览系统文章插图
很多小伙伴就要问了:OpenOffice 是什么呢?
OpenOffice 是 Apache 旗下的一款开源免费的文字处理软件 , 支持 Windows、Liunx、OS X 等主流操作系统 。
OpenOffice 和 Windows 下 office 办公软件有点类似 , 不过其实开源免费的 。
Spring Boot搭建的一个在线文件预览系统文章插图
启动项目运行FilePreviewApplication的 main 方法 , 服务启动后 , 访问http://localhost:8012/ 会看到如下界面 , 代表服务启动成功 。
Spring Boot搭建的一个在线文件预览系统文章插图
使用我们首先上传了 3 个不同的类型的文件来分别演示一下图片、PDF、Word 文档的预览 。
Spring Boot搭建的一个在线文件预览系统文章插图
图片的预览kkFileView 支持 jpg , jpeg , png , gif 等多种格式图片的预览 , 还包括了翻转 , 缩放图片等操作 。
图片的预览效果如下 。
Spring Boot搭建的一个在线文件预览系统文章插图
Word 文档的预览kkFileView 支持 doc , docx 文档预览 。
另外 , 根据 Word 大小以及网速问题 ,Word 预览提供了两种模式:
  • 每页 Word 转为图片预览
  • 整个 Word 文档转成 PDF , 再预览 PDF 。
两种模式的适用场景如下
  • 图片预览 :Word 文件大(加载 PDF 速度比较慢)的情况 。
  • PDF 预览 :内网访问(加载 PDF 速度比较快)的情况 。
图片预览模式预览效果如下:
Spring Boot搭建的一个在线文件预览系统文章插图
PDF 预览模式预览效果如下:
Spring Boot搭建的一个在线文件预览系统文章插图
PDF 文档的预览kkFileView 支持 PDF 文档预览 。 类似 Word 文档预览 ,PDF 预览提供了两种模式:
  • 每页 Word 转为图片预览
  • 整个 Word 文档转成 PDF , 再预览 PDF 。
由于和 Word 文档的预览展示效果一致 , 这里就不放图片了 。
文件预览核心代码分析API 层文件预览调用的接口是 /onlinePreview。
通过分析 /onlinePreview 接口我们发现 ,后端接收到预览请求之后 , 会从 URL 和请求中筛选出自己需要的信息比如文件后缀、文件名 。
之后会调用FilePreview类 的 filePreviewHandle() 方法 。 filePreviewHandle()方法是实现文件预览的核心方法 。
@RequestMapping(value = "http://kandian.youth.cn/onlinePreview")public String onlinePreview(String url, Model model, HttpServletRequest req) {FileAttribute fileAttribute = fileUtils.getFileAttribute(url);req.setAttribute("fileKey", req.getParameter("fileKey"));model.addAttribute("pdfDownloadDisable", ConfigConstants.getPdfDownloadDisable());model.addAttribute("officePreviewType", req.getParameter("officePreviewType"));FilePreview filePreview = previewFactory.get(fileAttribute);logger.info("预览文件url:{} , previewType:{}", url, fileAttribute.getType());return filePreview.filePreviewHandle(url, model, fileAttribute);}