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

土豪选择：如果不缺钱可以直接使用第三方预览收费的：这里推荐给大家：网址：https://view.xdocin.com/使用起来也非常的简单，只需要做一个地址拼接就可以使用用法：（这里使用vue项目示范）在页面上展示：<template><div class="CorrMethod"><div class="main"><

想太多会累i

4166人浏览 · 2022-05-15 18:41:56

想太多会累i · 2022-05-15 18:41:56 发布

土豪选择：

如果不缺钱可以直接使用第三方预览收费的：
这里推荐给大家：
网址：https://view.xdocin.com/
在这里插入图片描述
使用起来也非常的简单，只需要做一个地址拼接就可以使用
用法：（这里使用vue项目示范）
在页面上展示：

<template>
  <div class="CorrMethod">
	<!-- 主体 -->
    <div class="main">
      <h4>文件：{{ crossData.oldfilename }}</h4>
      <div class="operation" v-if="showDownload">
        <el-button type="text" @click="downloadFile">下载</el-button>
      </div>
      <!-- 这里可以使用 ifname标签将word文档展示在当前页面上（不支持修改） -->
      <iframe :src="preview" frameborder="0" class="preview"> </iframe>
    </div>
  </div>
</template>
<script>
import { getAllCrossEnvs } from "../../api/crossMethod";
export default {
  name: "CorrMethod",
  data() {
    return {
      // 建筑结构
      structure: [],
      // 一级腐蚀环境
      type: "",
      // 二级腐蚀环境
      envs2: [],
      selectVal: {
        env2: "",
        struc: "",
      },
      // 文档数据
      crossData: [],
      // 预览路径
      preview: "",
      // 下载按钮
      showDownload: false,
    };
  },
  created() {
    this.initData();
    this.initStructure();
  },
  methods: {
    // 获取全局数据
    initData() {
      if (JSON.parse(window.sessionStorage.getItem("searchResult"))) {
        const data = JSON.parse(window.sessionStorage.getItem("searchResult"));
        this.type = data.land;
        this.initEnvs2();
      } else {
        this.$router.push("/mainCon");
      }
    },
    // 获取二级腐蚀环境
    initEnvs2() {
      getAllCrossEnvs(this.type).then((res) => {
        if (res) {
          this.envs2 = res;
        }
      });
    },
    initStructure() {
      getAllStructure().then((res) => {
        if (res) {
          this.structure = res;
        }
      });
    },
    searchHandler(type) {
      if (type === "method") {
        getMethod(this.type, this.selectVal.env2, this.selectVal.struc).then(
          (res) => {
            this.crossData = res.obj[0];
            let url =
              "https://view.xdocin.com/view?src=" +
              encodeURIComponent(this.crossData.fileurl); // 这里的 fileurl就是后端返回的路径
            this.preview = url;
            this.showDownload = true;
          }
        );
      }
    },
    // 下载文件
    downloadFile() {
      window.open(this.crossData.fileurl);
    },
  },
};
</script>

<style scoped>
.sel_item {
  margin-right: 10px;
}
.operation {
  float: right;
  margin-right: 40px;
}
.preview {
  width: 87%;
  height: 500px;
  padding: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background-color: #e9e9eb;
}
</style>

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

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

那么接下来是穷鬼的做法：
这里使用的是一个开源的项目叫做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端口

环境要求
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';

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

<template>
  <div class="CorrMethod">
    <div class="top">
      <el-select
        class="sel_item"
        v-model="selectVal.struc"
        placeholder="建筑环境"
      >
        <el-option
          v-for="item in structure"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-select
        class="sel_item"
        v-model="selectVal.env2"
        placeholder="腐蚀环境(二级)"
      >
        <el-option
          v-for="item in envs2"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-button
        class="search_btn"
        type="primary"
        @click="searchHandler('method')"
        >查询方法</el-button
      >
      <el-button
        class="search_btn"
        type="primary"
        @click="searchHandler('case')"
        >查询案例</el-button
      >
      <el-button
        class="search_btn"
        type="primary"
        @click="searchHandler('standard')"
        >查询标准</el-button
      >
    </div>
    <!-- 主体 -->
    <div class="main">
      <h4>文件：{{ crossData.oldfilename }}</h4>
      <div class="operation" v-if="showDownload">
        <el-button type="text" @click="downloadFile">下载</el-button>
      </div>
      <iframe :src="preview" frameborder="0" class="preview"> </iframe>
    </div>
  </div>
</template>

<script>
import {
  getAllCrossEnvs,
  getAllStructure,
  getMethod,
  getCase,
  getStandard,
} from "../../api/crossMethod";
import { encode } from "js-base64";
export default {
  name: "CorrMethod",
  data() {
    return {
      // 文档数据
      crossData: [],
      // 预览路径
      preview: "",
      // 下载按钮
      showDownload: false,
    };
  },
  created() {
  },
  methods: {
    searchHandler(type) {
      if (type === "method") {
        getMethod(this.type, this.selectVal.env2, this.selectVal.struc).then(
          (res) => {
            this.crossData = res.obj[0];
            // 这里就是那个网址
            let url =
              "http://192.168.10.103:8012/onlinePreview?url=" +
              encodeURIComponent(encode(this.crossData.fileurl));
            this.preview = url;
            this.showDownload = true;
          }
        );
      }
    },
    // 下载文件
    downloadFile() {
      window.open(this.crossData.fileurl);
    },
  },
};
</script>

<style scoped>
.sel_item {
  margin-right: 10px;
}
.operation {
  float: right;
  margin-right: 40px;
}
.preview {
  width: 87%;
  height: 500px;
  padding: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background-color: #e9e9eb;
}
</style>

白嫖就是香：(效果展示)
在这里插入图片描述