土豪选择：

如果不缺钱可以直接使用第三方预览收费的：
这里推荐给大家：
网址：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.reposed -i 's/download.docker.com/mirrors.aliyun.com\/docker-ce/g' /etc/yum.repos.d/docker-ce.repoyum 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-selectclass="sel_item"v-model="selectVal.struc"placeholder="建筑环境"><el-optionv-for="item in structure":key="item":label="item":value="item"></el-option></el-select><el-selectclass="sel_item"v-model="selectVal.env2"placeholder="腐蚀环境(二级)"><el-optionv-for="item in envs2":key="item":label="item":value="item"></el-option></el-select><el-buttonclass="search_btn"type="primary"@click="searchHandler('method')">查询方法</el-button><el-buttonclass="search_btn"type="primary"@click="searchHandler('case')">查询案例</el-button><el-buttonclass="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>

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

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

vue中后端返回图片流，前端渲染方法
vue中后端返回图片流,前端渲染方法前端登录经常用到图形验证码,后端接口返回的是图片数据流,如下图返回图片流这样效果图如下: 首先封装接口api和uuid[就是一个随机数,防止重复] //获取图形 ...
Vue新手：实现文件预览功能的前端
预览文件的前端省略点击按钮点击触发showdialogview()方法的代码第一种方法先在template中加入一个input框,绑定一个字符串类型的变量写showdialogview()方法 ...
如何在vue中实现文件预览功能
文件流如何将各种文件的文件流(blob)转化为线上可以直接预览的数据,这里简单介绍四种不同类型的文件预览.分别是pdf,docx,xlsx,jpg/png/jpeg等.有一个事情是需要重点注意的,文 ...
Vue中实现pdf文件预览功能
写在前面: 实现的功能就是点击预览按钮,弹出对话框在线预览pdf文件实现此功能的前提是需要在Vue项目中安装组件vue-pdf, 在终端命令行输入运行如下语句: npm install --save ...
Vue中使用el-popover实现悬浮弹窗显示图片预览
场景数据库中存储照片的磁盘路径,需要鼠标在el-table的路径字段上悬浮时弹窗进行图片网络URL的预览,所以需要在悬浮后对图片路径进行磁盘路径和网络URL映射路径的转换. 注: 博客: htt ...
Vue中通过el-upload组件实现上传前预览本地图片
1.实现效果如下图所示用户选择本地待上传的图片,选择成功后,上传组件隐藏,呈现本地预览组件,单击图片并实现图片的放大呈现 2.template(相当于html)部分的代码如下代码实现逻辑: 在el ...
微信小程序文件下载预览真机调试可以但直接预览打不开小程序文件下载小程序文件预览
只要确保真机调试和调试状态下可以下载并预览文件即可,上线后即可预览成功文件预览代码: 小程序预览的前提需要先调用下载接口,下方代码未处理下载和预览失败事件哟,此处我使用的是uniapp框架,如果使用 ...
vue 如何解析原生html,VUE渲染后端返回含有script标签的html字符串示例
VUE渲染后端返回含有script标签的html字符串示例发布时间:2020-09-14 23:37:52 来源:脚本之家阅读:207 作者:冷幽悠在接入支付宝支付模块的时候,支支返回的是一个f ...
前端Vue中获取本机ip地址
前端Vue中获取本机ip地址 1.打开谷歌浏览器,地址栏输入chrome://flags,进入. 2.搜索Anonymize local IPs exposed by WebRTC,将其设置为Disa ...

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

土豪选择：

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

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

配置镜像加速

部署kkFileView（交给后端）

官方参考文档：https://kkfileview.keking.cn/zh-cn/docs/production.html

使用kkFileView （前端）

提示kkFileView需要使用`js-base64`

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

最新文章

热门文章

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

土豪选择：

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

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

配置镜像加速

部署kkFileView（交给后端）

官方参考文档：https://kkfileview.keking.cn/zh-cn/docs/production.html

使用kkFileView （前端）

提示kkFileView需要使用js-base64

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

最新文章

热门文章

提示kkFileView需要使用`js-base64`