vue中后端返回word文件下载地址，实现文件预览功能

土豪选择：

如果不缺钱可以直接使用第三方预览收费的：
这里推荐给大家：
网址：https://view.xdocin.com/

使用起来也非常的简单，只需要做一个地址拼接就可以使用
用法：（这里使用vue项目示范）
在页面上展示：

这个有试用期，到期就会收费，收费情况 大家可以加群资讯

作为一个穷鬼，我肯定不会为了这个花钱的

那么接下来是穷鬼的做法：
这里使用的是一个开源的项目叫做kkFileView
推荐部署在Linux云服务器上，阿里双十一可以白嫖的，腾讯云新用户活动50一年，贼香，哈哈
我这里呢使用的docker部署的方式，非常简单只需要两个指令就可以，并且这也是官方推荐的方法

安装docker（交给后端去部署）

如果之前安装过旧版本的Docker，可以使用下面命令卸载：

yum remove docker 
                  docker-client 
                  docker-client-latest 
                  docker-common 
                  docker-latest 
                  docker-latest-logrotate 
                  docker-logrotate 
                  docker-selinux 
                  docker-engine-selinux 
                  docker-engine 
                  docker-ce

安装yum工具

yum install -y yum-utils 
           device-mapper-persistent-data 
           lvm2 --skip-broken

然后更新本地镜像源：

# 设置docker镜像源
yum-config-manager 
    --add-repo 
    https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
    
sed -i 's/download.docker.com/mirrors.aliyun.com/docker-ce/g' /etc/yum.repos.d/docker-ce.repo

yum makecache fast

输入安装命令：

yum install -y docker-ce

注意：这里因为docker会用到各种端口，在docker中部署一些服务的时候一定要先打开对应的端口，否则会报错

通过命令启动docker：

systemctl start docker  # 启动docker服务

systemctl status docker # 查看docker状态

systemctl stop docker  # 停止docker服务

systemctl restart docker  # 重启docker服务

查看docker版本命令：

docker -v

配置镜像加速

docker官方镜像仓库网速较差，我们需要设置国内镜像服务：

参考阿里云的镜像加速文档：https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors

至此docker部署就完成了

部署kkFileView（交给后端） 官方参考文档：https://kkfileview.keking.cn/zh-cn/docs/production.html

我这里是部署在docker上的，可以考虑直接部署

首先这个服务默认是跑在8012端口的，先在云服务器打开8012端口

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

拉取镜像：

docker pull keking/kkfileview

运行kkFileView

docker run -it -p 8012:8012 keking/kkfileview

完成，可以使用docker命令查看运行情况

docker ps -a

最后去访问一下：

显示这个页面表示成功

接下来可以使用了

使用kkFileView （前端） 提示kkFileView需要使用js-base64

文档地址：https://www.npmjs.com/package/js-base64

# 在项目中安装 js-base64
npm install --save js-base64

在项目中引入：

import { encode } from 'js-base64';

我先面的项目中已经引入了这个包

白嫖就是香：(效果展示)