基于SpringBoot支持任意文件在线预览-工具盒子

环境：SpringBoot3.2.5

1. 简介

文件在线预览功能是项目管理中的一项非常有意义功能，它允许用户无需下载即可直接在网页上查看各种格式的文件，如PDF、Office文档、图片、PSD、BPMN等。在线预览功能无需客户端安装相应文件格式的软件，从而大大简化了文件查看的流程，降低了技术门槛，使得信息共享与协作变得前所未有的便捷与高效。

本篇文章将向大家推荐一个开源软件kkFileView，它基于Spring Boot框架构建，为用户提供了方便快捷的文件预览解决方案。目前支持如下文件格式：

支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx,xlam, xla ,pages 等 Office 办公文档
支持 wps, dps, et, ett, wpt 等国产 WPS Office 办公文档
支持 odt, ods, ots, odp, otp, six, ott, fodt, fods 等OpenOffice、LibreOffice 办公文档
支持 vsd, vsdx 等 Visio 流程图文件
支持 wmf, emf 等 Windows 系统图像文件
支持 psd ,eps 等 Photoshop 软件模型文件
支持 pdf ,ofd, rtf 等文档
支持 xmind 软件模型文件
支持 bpmn 工作流文件
支持 eml 邮件文件
支持 epub 图书文档
支持 obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, dae, wrl, 3mf, ifc, brep, step, iges, fcstd, bim 等 3D 模型文件
支持 dwg, dxf, dwf, iges , igs, dwt, dng, ifc, dwfx, stl, cf2, plt 等 CAD 模型文件
支持 txt, xml(渲染), xbrl(渲染), md(渲染), java, php, py, js, css 等所有纯文本
支持 zip, rar, jar, tar, gzip, 7z 等压缩包
支持 jpg, jpeg, png, gif, bmp, ico, jfif, webp 等图片预览（翻转，缩放，镜像）
支持 tif, tiff 图信息模型文件
支持 tga 图像格式文件
支持 svg 矢量图像格式文件
支持 mp3,wav,mp4,flv 等音视频格式文件
支持 avi,mov,rm,webm,ts,rm,mkv,mpeg,ogg,mpg,rmvb,wmv,3gp,ts,swf 等视频格式转码预览
支持 dcm 等医疗数位影像预览
支持 drawio 绘图预览

接下来将详细介绍在项目当中如何集成该文件预览功能

2. 实战案例

2.1 新建项目&配置

我们可以随意的新建一个SpringBoot项目，无需引入任何的依赖，我们只需要配置一个指向本地文件的一个目录即可。
* * * * * * * * * * *

@Componentpublic class ResourceConfig implements WebMvcConfigurer {
  @Override  public void addResourceHandlers(ResourceHandlerRegistry registry) {    // 配置本地一个目录，以/docs开头进行访问里面的文件    registry      .addResourceHandler("/docs/**")      .addResourceLocations("file:///d:/documents/") ;  }}

当前目录下准备的文件如下：

8.dcm是一个dicom文件（影像文件），访问4.png查看配置是否成功

成功访问，其它文件的访问只能交给KkFileView来完成了。

2.2 拉取kkFileView项目

本人从下面地址拉取的项目

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

项目拉取后，你无需配置任何东西，直接运行cn.keking.ServerMain

成功启动项目，访问http://127.0.0.1:8012/，可以查看当前KkFileView支持的文件格式，及简单的文件上传预览功能。

2.3 通过KkFileView预览文件

要想预览我们的文件，我们只需要将自己文件的url以参数的形式传给KkFileView提供的即可。

首先，我们需要将我们的地址进行base64编码，如下编码： * * * * * * * *

// 1.psd ===> http://localhost:8010/docs/1.psd编码后：aHR0cDovL2xvY2FsaG9zdDo4MDEwL2RvY3MvMS5wc2Q=// 8.dcm ===> http://localhost:8010/docs/8.dcm编码后：aHR0cDovL2xvY2FsaG9zdDo4MDEwL2RvY3MvOC5kY20=// 技能表.xlsx ===> http://localhost:8010/docs/技能表.xlsx编码后：aHR0cDovL2xvY2FsaG9zdDo4MDEwL2RvY3Mv5oqA6IO96KGoLnhsc3g=// 模板示例.docx ===> http://localhost:8010/docs/模板示例.docx编码后: aHR0cDovL2xvY2FsaG9zdDo4MDEwL2RvY3Mv5qih5p2/56S65L6LLmRvY3g=

将我们项目中文件的URL编码后，接下来就可以通过KkFileView提供的接口进行预览我们的文件了。

KkFileView提供了下面的地址

http://127.0‍.0.1:8012/onlinePreview?url=xxx

将上面每个文件URL对应的base64替换这里的xxx即可。

PSD文件

影响文件DCM

word文档

Excel文档

这Excel还支持HTML预览

通常情况我们项目中的文件的url是通过传递一个id，然后返回文件流进行下载，这时候我们要预览就需要在地址栏再添加一个参数来指明我们的文件格式，如下示例：

定义后端接口
* * * * * * * * * * *

// 这里我们展示PPT文档@GetMapping("/{id}")public void stream(@PathVariable Long id, HttpServletResponse response) throws Exception {  FileSystemResource resource = new FileSystemResource(new File("f:/documents/述职报告PPT.pptx")) ;  response.addHeader("Cache-Control", "public, max-age=86400") ;  response.setCharacterEncoding("UTF-8");  response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);  response.addHeader("Content-Disposition",       "attachment;filename=" + URLEncoder.encode("述职报告PPT.pptx", "UTF-8")) ;  StreamUtils.copy(resource.getInputStream(), response.getOutputStream()) ;}

此时，我们的接口访问地址是：http://localhost:8010/resourcestream/666

访问该地址将直接下载文件。要通过KkFileView查看该文件，我们还需要在地址栏添加如下的参数：