一文教你优雅落地在线预览服务

简介: 一文教你优雅落地在线预览服务


image.png

在日常开发中,在线预览是一个很常见的功能。在最开始调研时,博主选择自己实现,但是有以下问题。

  1. 需要预览的类型太多,很多类型需要不同的预览方式。开发成本较大。
  2. 格式调整不理想。

而且博主公司需求比较紧急,所以楼主在开源项目找到kkfile.

1.为什么选择kkfile

  1. 支持格式多样,支持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。
  2. 使用spring boot开发,很容易修改源码。
  3. 提供Docker镜像发行包,方便在容器环境部署。
  4. 支持普通http/https文件下载url、http/https文件下载流url、ftp下载url等多种预览源
  5. 开源!!!!免费。在这里感谢作者。

2.部署

这里可以直接下载window/linux包。

地址:https://gitee.com/kekingcn/file-online-preview/releases

1.环境要求

  1. Java: 1.8+
  2. OpenOffice或LiberOffice(Windows下已内置,CentOS或Ubuntu下会自动下载安装,MacOS下需要自行安装)

需要的依赖真心少,如果是linux下openoffice也不需要下载。这里注意centos8暂时不能安装openoffice。

2.更改配置

配置文件在以下路径,可以根据个人需要按照注释修改,如果没有特殊需求,直接启动就可以。

image.png

3.启动

1.传统方式启动

进入以下文件夹,找到启动文件即可实现启动。

window:双击startup.bat或者cmd - 输入startup.bat

linux:./startup.sh (这里我是用的CentOS Linux release 7.7.1908 (Core) 启动会自动下载 项目需要的插件 如:openoffice)

2.docker启动

拉取镜像

docker pull keking/kkfileview

运行

docker run -it -p 8012:8012 keking/kkfileview
3.验证

访问 ip:8012即可验证是否成功。如以下操作就可以查看到上传的文件了。

image.png

在使用过程中,不需要整合到原有代码中(如果有精力和能力可以尝试)。以独立服务方式提供功能接口。

4.如何调用

在前段代码中如下文调用即可

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>
var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));

1.调用原理

  1. 获取文件的流。var url = ‘http://127.0.0.1:8080/file/test.txt’; 为一个下载文件的接口(需要自己实现),调用后会返回文件流。
  2. 将上文得到的文件流传到http://127.0.0.1:8012/onlinePreview接口中。

2.下载接口

    @GetMapping("/Download")
    public String onlineDownload(FileMessageVO fileMessageVO) throws UnsupportedEncodingException {
        String commonfile = "/home/common_files/";
        // 获取HttpServletResponse
        HttpServletResponse response =
            ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getResponse();
        String fileName = fileMessageVO.getFullfilename();// 文件名
        if (fileName != null) {
            // 设置文件路径
            File file = new File(commonfile + fileName);
            if (file.exists()) {
                // 设置HTTP响应头
                response.reset();
                try {
                    OutputStream os = response.getOutputStream();
                    // 读取文件
                    InputStream in = new FileInputStream(file);
                    // copy文件
                    IOUtils.copy(in, os);
                    in.close();
                    os.close();
                    return "下载成功";
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        return "下载失败";
    }
public class FileMessageVO {
    /**
     * 文件路径
     */
    private String fileRoute;
    /**
     * 下载地址
     */
    private String fileDownloadUri;
    /**
     * 文件类型
     */
    private String fileType;
    /**
     * 文件大小
     */
    private String size;
    /**
     * 在线预览字段
     */
    private String fullfilename;
    }

这里注意:下载接口中,文件名一定要使用fullfilename。不要问为什么不适用驼峰写法!

3.示例

那么在以上条件下该如何调用呢,请参考下文示例。以下是前台代码。

//以下是你业务服务提供的下载接口,意思是通过文件名称下载
let url = `http://39.103.xxx.xxx:8080/flowable/Download?fullfilename=${fileName}`;
//以下配置好在线预览服务器即可
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));

5.关于异常

可以参考官方文档:https://kkfileview.keking.cn/zh-cn/docs/faq.html

3.修改源码并打包

因为楼主公司业务需求的原因,传入的文件是md5加密后的名称,不带路径名称,所以需要更改源码,更改接口,以下介绍楼主是如何修改的。

1.确定controller

根据查找确定预览接口 如下 :

根据图分析,每一种文件都有自己一套解析的流程(策略+工厂模式),我们需要修改这些流程,楼主这里新增了一套接口,为加密使用。(为什么不在原来的接口上修改,因为楼主想保持原接口好用)

image.png

image.png

2.工厂类

这个就是工厂类。根据文件类型确定调用的类(没有修改)

image.png

3.FilePreview接口

可以看到核心接口FilePreview,每种文件的解析方法都集成于FilePreview,所以接口我们按照自己的需求重写了一套。

image.png

image.png

4.FilePreview接口的实现

接下来我就就可以在FilePreview接口的实现类中取重写我们的流程了(以上新增的接口都是在原有文件上修改)以下举一个例子,楼主的逻辑是把原文件的后缀名发进来,然后重新拼写下载。

image.png

5.开启拦截

新增接口时,需要新增以下配置,否则访问不到。

image.png

6.打包

打包就会生成我们的jar包了 然后就可以愉快的调用了

image.png

image.png

7.调用

在使用时不要忘记将接口名称改成我们修改过的。

window.open('http://127.0.0.1:8012/onlinePreviewMd5?url='+encodeURIComponent(Base64.encode(previewUrl)));


相关文章
|
安全 大数据 云计算
内附PPT下载 | 肖力:企业安全体系发展与最佳实践
阿里巴巴副总裁、阿里云安全事业部总经理、阿里巴巴集团第一位安全工程师肖力为大家带来企业安全体系发展与最佳实践的介绍。内容包括企业安全体系的演变,阿里在整个企业安全体系各个基础风险域当中的一些最佳实践,以及云计算对安全体系的影响。
1864 0
|
3月前
|
测试技术 定位技术 项目管理
一图搞懂,全流程项目管理实践地图,驱动:市场-研发-售后
为了实现市场运营、产品研发与售后服务的有效协作,YesDev项目管理工具提供了一个全面的解决方案。它覆盖从项目成单到交付的全过程,通过清晰地划分市场运营、产品研发和售后服务三个主要阶段,加上组织管理作为基础设施,形成3+1的管理体系。 YesDev提供了一套从市场到售后的全流程管理方案,帮助企业实现跨部门高效协作。
|
机器学习/深度学习 人工智能
体育赛事转播平台开发搭建,技术扩展瞄准AI解说功能
"随着体育赛事的蓬勃发展,每年都有大量的体育比赛视频呈现给球迷,其中不可能所有视频都能得到人工解说。这正是AI语音解说的大展拳脚之地。
|
存储 人工智能 算法
MATIC马蹄链佛萨奇2.0系统源码搭建|现成案例|成熟技术
function _setImplementation(address newImplementation)internal{
|
人机交互 容器
《在线时代先进文档编辑器设计探索-Suki》演讲视频&文字版
《在线时代先进文档编辑器设计探索-Suki》演讲视频&文字版
219 0
|
机器学习/深度学习 设计模式 前端开发
《探索中后台设计提效的次时代-短篇》演讲视频 + 文字版
《探索中后台设计提效的次时代-短篇》演讲视频 + 文字版
193 0
|
测试技术 API Python
热饭的测开成果盘点第六期:在线编辑脚本平台
本期介绍的是一个django平台,它是我在18年的第一次大胆尝试在线维护脚本组装脚本。
热饭的测开成果盘点第六期:在线编辑脚本平台
|
人工智能 自然语言处理 测试技术
热饭的测开成果盘点第十九期:移动端自动化智能平台
本期介绍的是移动端app智能架构平台,效果和上期一样,也是直接根据用例 来直接执行,它的初衷是可以简单的对我们测试环境几千条用例全部自动执行的框架。在具体稳定和速度上可能不如原始写法,但是对付这种上千条的大需求,是有奇效的。
热饭的测开成果盘点第十九期:移动端自动化智能平台
|
移动开发 人工智能 监控
热饭的测开成果盘点第十七期:web自动化智能平台
本期介绍的是打造的一款新的架构的selenium自动化平台。它可以实现的效果是,直接在用例平台爬下来用例,然后让浏览器去自动执行。就像一个活人一样去点点点。
热饭的测开成果盘点第十七期:web自动化智能平台
|
程序员 vr&ar 开发工具
如何用视频云技术,搞一个爆红的 “反应视频” 项目?
2021 年 2 月,“新内容 新交互” 全球视频云创新挑战赛启幕。本次大赛由英特尔联合阿里云主办,与优酷战略技术合作,天池平台和阿里云视频云团队共同承办。大赛自开赛以来,吸引了全球超过 4600 名选手报名参赛,我们遴选了参赛选手中优秀案例和动人故事,一起走进视频云创业创新者的世界。
如何用视频云技术,搞一个爆红的 “反应视频” 项目?
下一篇
无影云桌面