乐趣区

关于spring:手把手教你用-Spring-Boot搭建一个在线文件预览系统支持pptdoc等多种类型文件预览

昨晚搭建环境都花了好一会工夫,次要在节约在了装置 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. 代码品质个别,有很多能够优化的中央比方:

    • Controller 层代码嵌套太多逻辑
    • 没有进行全局异样解决(_代码中是间接返回错误信息的 json 数据给前端,我并不举荐这样做_)
    • 返回值不须要通过 ObjectMapper 转换为 JSON 格局(ResponseEntity+@RestController 就行了)
    • ……
  2. 应用的公司比拟多,阐明我的项目整体性能还是比较稳定和成熟的!
  3. 代码整体逻辑还是比拟清晰的,比拟容易看懂,给作者们点个赞!

环境搭建

克隆我的项目

通过以下命令即可将我的项目克隆到本地:

git clone https://gitee.com/kekingcn/file-online-preview.git

装置 OpenOffice

office 类型的文件的预览依赖了 OpenOffice,所以咱们首先要装置 OpenOffice(Windows 下已内置,Linux 会主动装置,Mac OS 下须要手动装置)。

上面演示一下如何在 Mac 上装置 OpenOffice。

你能够通过以下命令装置最新版的 OpenOffice:

brew cask install openoffice

不过,这种形式下载可能会比较慢,你能够间接去官网下载 dmg 安装包。

官网下载地址:https://www.openoffice.org/download/

很多小伙伴就要问了:OpenOffice 是什么呢?

OpenOffice 是 Apache 旗下的一款开源收费的文字处理软件,反对 Windows、Liunx、OS X 等支流操作系统。

OpenOffice 和 Windows 下 office 办公软件有点相似,不过其实开源收费的。

启动我的项目

运行 FilePreviewApplication 的 main 办法,服务启动后,拜访 http://localhost:8012/ 会看到如下界面,代表服务启动胜利。

应用

咱们首先上传了 3 个不同的类型的文件来别离演示一下图片、PDF、Word 文档的预览。

图片的预览

kkFileView 反对 jpg,jpeg,png,gif 等多种格局图片的预览,还包含了翻转,缩放图片等操作。

图片的预览成果如下。

Word 文档的预览

kkFileView 反对 doc,docx 文档预览。

另外,依据 Word 大小以及网速问题,Word 预览提供了两种模式:

  • 每页 Word 转为图片预览
  • 整个 Word 文档转成 PDF,再预览 PDF。

两种模式的实用场景如下

  • 图片预览:Word 文件大(加载 PDF 速度比较慢)的状况。
  • PDF 预览:内网拜访(加载 PDF 速度比拟快)的状况。

图片预览模式预览成果如下:

PDF 预览模式预览成果如下:

PDF 文档的预览

kkFileView 反对 PDF 文档预览。相似 Word 文档预览,PDF 预览提供了两种模式:

  • 每页 Word 转为图片预览
  • 整个 Word 文档转成 PDF,再预览 PDF。

因为和 Word 文档的预览展现成果统一,这里就不放图片了。

文件预览外围代码剖析

API 层

文件预览调用的接口是 /onlinePreview

通过剖析 /onlinePreview 接口咱们发现,后端接管到预览申请之后,会从 URL 和申请中筛选出本人须要的信息比方文件后缀、文件名。

之后会调用 FilePreview 类 的 filePreviewHandle() 办法。filePreviewHandle() 办法是实现文件预览的外围办法。

@RequestMapping(value = "/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);
}

FilePreview 是文件预览接口,不同的文件类型的预览都实现了 FilePreview 接口,并实现了 filePreviewHandle() 办法。

文件预览接口

public interface FilePreview {String filePreviewHandle(String url, Model model, FileAttribute fileAttribute);
}

不同的文件类型的预览都实现了 FilePreview 接口,如下图所示。

不同文件类型的预览都会实现 FilePreview 接口,而后重写 filePreviewHandle() 办法。比方:OfficeFilePreviewImpl 这个次要负责解决 office 文件的预览、PdfFilePreviewImpl 次要负责解决 pdf 文件的预览。

文件预览具体实现剖析

上面咱们以 office 文件的预览为入口来剖析。

首先要明确的是 excel 类型的预览是通过将 excel 文件转换为 HTML 实现的,其余类型 office 文件的预览是通过将文件转换为 PDF 或者是 图片的形式来预览的。

举个例子。咱们上传了一份名为 武汉市文化市场治理方法.docx 的 Word 文件并预览的话,jodconverter-web/src/main/file 门路下会生成两个相干文件,这两个文件别离对应了咱们提到的 PDF 预览 和 图片预览这两种形式。

  • 武汉市文化市场治理方法.pdf
  • 由 Word 文件所转化失去的一系列图片

咱们以一个名为 武汉市文化市场治理方法.docx 的文件来举例说明一下代码中是如何做的。

通过剖析代码,咱们定位到了 OfficeFilePreviewImpl 这个次要负责解决 office 文件预览的类。

/**
 * 解决 office 文件
 */
@Service
public class OfficeFilePreviewImpl implements FilePreview {}

咱们来简略剖析一下 OfficeFilePreviewImpl 类中实现预览的外围办法是 filePreviewHandle

阐明:这部分代码的逻辑不够清晰,还能够抽办法优化以让人更容易读懂,感兴趣的小伙伴能够本人入手重构一下,而后去给作者提个 PR。

    @Override
    public String filePreviewHandle(String url, Model model, FileAttribute fileAttribute) {// 1. 获取预览类型(image/pdf/html),用户申请中传了 officePreviewType 参数就取参数的,没传取零碎默认(image)String officePreviewType = model.asMap().get("officePreviewType") == null ? ConfigConstants.getOfficePreviewType() : model.asMap().get("officePreviewType").toString();
        // 2. 获取 URL 地址
        String baseUrl = BaseUrlFilter.getBaseUrl();// http://localhost:8012/
        // 3. 获取图片相干信息
        String suffix=fileAttribute.getSuffix();// 文件后缀如 docx
        String fileName=fileAttribute.getName();// 文件名如:武汉市文化市场治理方法.docx
        // 4. 判断是否为 html 格局预览也就是判断文件否为 excel
        boolean isHtml = suffix.equalsIgnoreCase("xls") || suffix.equalsIgnoreCase("xlsx");
        // 5. 将文件的后缀名更换为 .pdf 或者 .html(excel 文件的状况)String pdfName = fileName.substring(0, fileName.lastIndexOf(".") + 1) + (isHtml ? "html" : "pdf");
        // 6. 转换后的文件输入的文件夹如 file-online-preview/jodconverter-web/src/main/file/ 武汉市文化市场治理方法.pdf)String outFilePath = FILE_DIR + pdfName;
        // 7 . 判断之前是否已转换过,如果转换过,间接返回,否则执行转换
        // 文件第一次被预览的时候会首先对文件进行缓存解决
        if (!fileUtils.listConvertedFiles().containsKey(pdfName) || !ConfigConstants.isCacheEnabled()) {
            String filePath;
            // 下载文件
            ReturnResponse<String> response = downloadUtils.downLoad(fileAttribute, null);
            if (0 != response.getCode()) {model.addAttribute("fileType", suffix);
                model.addAttribute("msg", response.getMsg());
                return "fileNotSupported";
            }
            filePath = response.getContent();
            if (StringUtils.hasText(outFilePath)) {officeToPdf.openOfficeToPDF(filePath, outFilePath);
                if (isHtml) {// 对转换后的文件进行操作(扭转编码方式)
                    fileUtils.doActionConvertedFile(outFilePath);
                }
                if (ConfigConstants.isCacheEnabled()) {
                    // 退出缓存
                    fileUtils.addConvertedFile(pdfName, fileUtils.getRelativePath(outFilePath));
                }
            }
        }
        // 8. 依据预览类型 officePreviewType,抉择不同的预览形式
        // 比方, 如果预览类型 officePreviewType 为 pdf 则进行 pdf 形式预览
        if (!isHtml && baseUrl != null && (OFFICE_PREVIEW_TYPE_IMAGE.equals(officePreviewType) || OFFICE_PREVIEW_TYPE_ALL_IMAGES.equals(officePreviewType))) {return getPreviewType(model, fileAttribute, officePreviewType, baseUrl, pdfName, outFilePath, pdfUtils, OFFICE_PREVIEW_TYPE_IMAGE);
        }
        model.addAttribute("pdfUrl", pdfName);
        return isHtml ? "html" : "pdf";
    }

我的项目地址:https://github.com/kekingcn/kkFileView

我整顿了一份优质原创 PDF 资源收费分享给大家,大部分内容都是我的原创,少部分来自敌人。

<img src=”https://cdn.jsdelivr.net/gh/javaguide-tech/blog-images/2020-10/image-20201012105544846.png” style=”zoom:50%;” />

<img src=”https://cdn.jsdelivr.net/gh/javaguide-tech/blog-images/2020-10/image-20201012105608336.png” alt=”image-20201012105608336″ style=”zoom:50%;” />

下载地址:https://cowtransfer.com/s/fbed14f0c22a4d。

我的开源我的项目举荐

  1. JavaGuide:「Java 学习 + 面试指南」一份涵盖大部分 Java 程序员所须要把握的外围常识。筹备 Java 面试,首选 JavaGuide!
  2. guide-rpc-framework:A custom RPC framework implemented by Netty+Kyro+Zookeeper.(一款基于 Netty+Kyro+Zookeeper 实现的自定义 RPC 框架 - 附具体实现过程和相干教程)
  3. jsoncat:仿 Spring Boot 但不同于 Spring Boot 的一个轻量级的 HTTP 框架
  4. programmer-advancement:程序员应该有的一些好习惯 + 面试必知事项!
  5. springboot-guide:Not only Spring Boot but also important knowledge of Spring(不只是 SpringBoot 还有 Spring 重要知识点)
  6. awesome-java:Collection of awesome Java project on Github(Github 上十分棒的 Java 开源我的项目汇合).

我是 Guide 哥,一 Java 后端开发,会一点前端,自在的少年。咱们下期再见!微信搜“JavaGuide”回复“面试突击”支付我整顿的 4 本原创 PDF

退出移动版