框架添加了增强文件预览的功能，若要使用，请进行如下操作，集成功能:

一. 概述

增强版文件预览，基于kkFileView (opens new window)实现，基本支持主流办公文档的在线预览，如doc,docx,Excel,pdf,txt,zip,rar,图片等等。

二. 集成

要集成增强版文件预览功能，需要安装kkFileView。

1. 下载

kkFileView官方不再免费提供 Windows 和 Linux 的发行安装包了，要下载安装包要花99块钱进KK开源社区群获取。

这里安装程序找孙超获取。

操作系统	程序包
Windows	kkFileView-4.2.1.zip
Linux	kkFileView-4.2.1.tar.gz LibreOffice_7.3.7.2_Linux_x86-64_rpm.tar.gz LibreOffice_7.3.7.2_Linux_x86-64_rpm_langpack_zh-CN.tar.gz

2. 安装

推荐使用Windows系统。

• Windows

  解压kkFileView-4.2.1.zip，进入 bin 目录。

  双击 startup.bat 启动 kkFileView。演示页请访问: http://127.0.0.1:8012，则说明启动成功。

• Linux

  • 安装LibreOffice

    kkFileView默认会下载LibreOffice的安装包到 /tmp路径下，自动会完成安装。但是失败率非常高，所以这里我们手工安装LibreOffice。

    tar -zxvf LibreOffice_7.3.7.2_Linux_x86-64_rpm.tar.gz
    cd LibreOffice_7.3.7.2_Linux_x86-64_rpm/
    yum install -y ./RPMS/*.rpm
    
    cd ../LibreOffice_7.3.7.2_Linux_x86-64_rpm_langpack_zh-CN/
    yum install -y ./RPMS/*.rpm
    

  • 运行kkFileView

    tar -zxvf kkFileView-4.2.1.tar.gz
    cd kkFileView-4.2.1
    ./bin/startup.sh
    

  演示页请访问: http://127.0.0.1:8012，则说明启动成功。

三. 配置

kkFileView文件的配置在config/application.properties中，具体的配置项请看application.properties中的注释。

四. RSP框架使用

1. 修改.env.development | .env.staging | .env.production

添加 VUE_FILE_PREVIEW = '/file-preview'

2. 修改vue.config.js

添加

[process.env.VUE_FILE_PREVIEW]: {
  target: `http://localhost:8012`,  // kkFilePreview 服务地址
  changeOrigin: true,
  pathRewrite: {
    ['^' + process.env.VUE_FILE_PREVIEW]: ''
  }
},

3. 修改ui模块src/components/FileUpload/index.vue

• 添加方法

filePreviewEnhance(fileUrl, watermark = false) {
  const prefix = window.location.protocol+"//"+window.location.host
  let url = encodeURIComponent(this.encodeBase64(prefix + this.baseUrl + fileUrl))
  if(watermark) {
    url += '&watermarkTxt=' + encodeURIComponent(this.$store.state.user.nickName)
  }
  window.open('/file-preview/onlinePreview?url=' + url);
}

• 修改预览方法

<el-link @click="filePreview(file.url)" :underline="false" target="_blank">
  <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>

<!-- 修改为 -->

<el-link @click="filePreviewEnhance(file.url)" :underline="false" target="_blank">
  <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>

五. 生产环境

生产环境会用nginx进行代理，需要进行如下配置

例如：项目地址：http://115.76.27.102:8000， kkFileView 服务地址：http://8.10.29.22:8200

• nginx.conf 下添加配置

location /file-preview {
  proxy_pass http://8.10.29.22:8200;
  proxy_set_header Host $proxy_host;
}

• kkFileView 中 application.properties

server.servlet.context-path=/file-preview
base.url = http://115.76.27.102:8000/file-preview

六. 参考资料

• https://gitee.com/kekingcn/file-online-preview
• https://blog.csdn.net/qq_33697094/article/details/126076565