前端预览Word、PDF、Excel等等记录


集团的项目需要做合同预览,一般都是 PDF WORD 等这两种格式,经过了几个方案之后,最终选定的 kkFileView 预览

微软的那个预览…【查看】有问题,预览 docx 的没问题,预览 doc 的有问题。

XDOC 云预览的那个也有问题,大概也就用了一个月还是10天半个月的,就开始让联系他们了,可能是要收费或者引流啥的吧,反正不愿意,这里修改成了 kkFileView

流程记录

  1. java jdk 安装,搭建 java 环境
  2. maven 下载安装,用来编译 java 程序
  3. 下载 kkFileView 源码
  4. maven 编译下载下来的 kkFileView 源码
  5. 修改 kkFileView 配置
  6. 启动
  7. 调试
  8. 配置域名
  9. 重启

java jdk 安装

java jdk 1.8+ 去下载

linux 配置:
该步骤来自[俊林大大]
第一步:创建jdk安装目录(该/usr/local/src 目录是空的,最好把我们自己下载的放到这,容易区分)
        命令:mkdir -p /usr/local/src/jdk
   第二步:查看安装程序
        命令:rpm -qa | grep -i jdk
        若之前安装过jdk,下次安装一定把之前的删除干净
   第三步:命令下载jdk包 (需要联网,下载也需要点时间)
        本章使用的为后缀为tar.gz的文件(不需要安装),如jdk-8u131-linux-x64.tar.gz
        命令:[root@bogon jdk]# wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-securebackup-cookie"  http://download.oracle.com/otn-pub/java/jdk/8u131-b11/d54c1d3a095b4ff2b6607d096fa80163/jdk-8u131-linux-x64.tar.gz
       注意:如果上面wget命令不能用,报错:-bash: wget: command not found。执行一下该命令(安装依赖包) yum -y install wget
       注意 : 记住需要加上:--no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-securebackup-cookie"    这段是为了避开用户验证用的
   第四步:解压
        [root@bogon jdk]# tar -zxvf jdk-8u131-linux-x64.tar.gz
        系统会生成一个名为:jdk1.8.0_131 的文件夹。可以使用mv命令自定义文件名。
        [root@bogon jdk]# mv jdk1.8.0_131  jdk1.8
   第五步:配置环境变量
        [root@bogon bin]# vi /etc/profile
        可以看到这个文件的内容,profile文件有点类似于windows系统里面的环境变量的配置,
        shift + g 定位到最后一行
        这个时候按一下a或i键,进入编辑模式

        中间用红色的线圈起来的就是需要加的( JAVA_HOME  是jdk安装目录,和在Windows下配置一样 )
export JAVA_HOME=/usr/local/src/jdk/jdk1.8
export PATH=$PATH:$JAVA_HOME/bin
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
   第六步:退出文件,保存
         按Esc键   输入:wq   保存并退出
   第七步:让配置文件生效
    [root@bogon jdk]# source /etc/profile
   第八步:查看是否配置成功
         [root@bogon java1.8]# java -version     
    若出现jdk版本号,则安装并配置环境变量成功
         如果提示命令找不到的话,查看一下jdk的配置路径是否错误。


sudo apt-get remove openjdk*  清除自带jdk

jdk不生效时执行
sudo update-alternatives --install /usr/bin/java java /usr/local/jdk1.8.0_121/bin/java 300

sudo update-alternatives --install /usr/bin/javac javac /usr/local/jdk1.8.0_121/bin/javac 300

sudoupdate-alternatives --config java

maven 安装

去下载

linux 配置
该步骤来自[俊林大大]
上传到linux的/usr/local目录
cd /usr/local
解压maven的tar文件
tar -zxvf apache-maven-3.5.4-bin.tar.gz 
配置环境变量
vim编辑文件
vim /etc/profile
输入i,进入在pro编辑模式,file的文件末尾,新增配置

export MAVEN_HOME=/usr/local/apache-maven-3.6.1
export PATH=$MAVEN_HOME/bin:$PATH
或者
MAVEN_HOME=/usr/local/maven3
export MAVEN_HOME
export PATH=${PATH}:${MAVEN_HOME}/bin


按返回键(ESC),进入一般模式,输入冒号,然后输入wq,保存退出
刷新配置文件
source /etc/profile

测试 mvn -v

下载 kkFileView

去下载

maven 编译下载下来的 kkFileView

问题反馈记录:windows下找不到kkFileView-3.5.jar文件

下载下来的源码上传到服务器上,解压得到 file-online-preview

在 file-online-preview 目录(cd file-online-preview)直接 mvn package 打包

等待完成之后

进入 file-online-preview/server/target

将 kkFileView-3.5.1.tar.gz 拷贝出来,放到自己熟悉的地方并解压得到 kkFileView-3.5.1

修改 kkFileView 配置

官网配置描述地址:【配置说明

这里只是关闭了 预览的时候 图片/PDF 切换按钮 然后重启

进入 kkFileView-3.5.1/config 编辑 application.properties 文件
修改完成之后退出并保存

启动

找到 kkFileView-3.5.1/bin/startup.sh 并执行它 (直接在bin目录下运行 ./startup.sh)
服务就启动了,可以直接访问 主机地址:8012 测试

调试

遇到的问题都在这两个地方找到了解决办法:【常见问题】【Issues

配置域名

这里用 Nginx 做的 proxy 代理
Nginx 配置一个 https://www.abc.com 然后 proxy_pass 到 主机名:8012
修改  kkFileView-3.5.1/config/application.properties 的 base.url="https://www.abc.com"

重启

netstat -tunlp | grep 8012 # 查看 8012 进程ID
kill 进程ID
重新运行 kkFileView-3.5.1/bin/startup.sh 

使用中遇到的问题

移动端不能双指缩放问题:

这是项目本身的问题,不是 kkFileView 问题,修改 meta 标签的视口,放开缩放就好了

移动端预览图片过大问题:

下载下来的源码包里有个 file-online-preview/server/src/main/resources/web/officePicture.ftl 文件
vim ***/officePicture.ftl
在 style 标签最后添加:
.my-photo{
    width: 100%;
    max-width: 868px;
}
重新使用 maven 打包一下,然后解压,把之前的配置文件拿过来(kkFileView-3.5.1/config/application.properties)
干掉当前运行的 8012 进程
netstat -tunlp | grep 8012 # 查看 8012 进程ID
kill 进程ID
重新运行 kkFileView-3.5.1/bin/startup.sh 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值