实现调用本地office打开在线文档功能

一、需求阐述：

项目中需要做一个文档管理功能，该功能包含最基础的上传、下载、删除等功能，但是额外需要实现点击文档列表链接，实现调用本地对应office打开对应类型文档的功能，现将该功能实现方案列出来，供大家参考。

二、实现方案

1.通过给需要点击的对象添加点击方法，传入获取到的链接地址

<el-table-column :show-overflow-tooltip="true" label="FileName"><template slot-scope="scope"><div class="imagedoc"><img v-if="scope.row.fileName!=''"     :src="'../../static/image/lab_fileshare/'+scope.row.fileName.split('.') [1].toLowerCase()+'.png'":onerror="errorImg"alt=""><!--<a href="ms-word:ofe|u|http://10.120.16.213/web/data/share_files/测试数据.docx">{{scope.row.fileName}}</a>--><a :href="openUrlhref" @click="openFile(scope.row.fileUrl)">    {{scope.row.fileName}}</a></div></template>
</el-table-column>

2.在方法中通过截取，判断文件类型，通过文件类型去调用不同的方法打开文件

openFile(url){//打开本地office预览文档if (url.indexOf(".doc") != -1)this.openUrlhref = 'ms-word:ofe|u|'+url;//打开wordif (url.indexOf(".ppt") != -1)this.openUrlhref = 'ms-powerpoint:ofe|u|'+url;//打开pptif (url.indexOf(".xls") != -1)this.openUrlhref = 'ms-excel:ofe|u|'+url;//打开excelif(url.indexOf('.PNG')>-1 || url.indexOf('.png')>-1 || url.indexOf('.jpg')>-1|| url.indexOf('.txt')>-1|| url.indexOf('.zip')>-1){ //该类型文件不能打开this.openUrlhref = 'javascript:;';this.$message({message:'Please download to local and open !',type:'warning'})}
},

3.在线文档链接结构如下

http://10.120.16.213/web/data/share_files/测试数据.docx

三、效果图

实现调用本地office打开在线文档功能相关推荐

WPS本地镜像化在线文档操作以及样例
一个客户项目有引进在线文档操作需求,让我这边做一个demo调研下,给我的对接文档里有相关方法的说明,照着对接即可.但在真正对接过程中还是踩过不少坑,这儿对之前的对接工作做个记录. 按照习惯先来一个效果 ...
WPS使用，实现用WPS打开在线文档并且进行编辑
相关资料文档 JSAPI概述及原理 https://kdocs.cn/l/skWT29577eEE JSAPI集成开发文档 https://kdocs.cn/l/srARJ5L8CTx4 JSAPI功 ...
巧妙利用DZ自有功能实现豆丁网在线文档功能
操作中需要用到一下软件: 1.OFFIC系列办公软件 2.PDF编辑软件 3.将文档转化为SWF文件的软件 4.FLASH播放软件材料下载: 1.OFFIC系列办公软件就不用说了吧,大家都懂的 ...
vue接入点聚weboffice打开在线文档报系统错误
运行官方的demo能正常打开线上文档放到vue打开就报错打开demo一行一行的排查解决bug:组件初始化需要调用一下weboffice.OptionFlag |= 128; 相关代码: // w ...
【android】调用系统app打开word文档遇到的问题
app突然点击word文件下载后没反应,搞了半天居然是少了个"-"的问题,但是以前都没问题,突然就打不开了,网上也找不到答案: 原来的type是"application/ ...
Java实现在线打开word文档并强制留痕/留下痕迹
前言: 在OA系统中,时不时的都会伴随着文档流转过程.比如有的系统中会有领导审批的流程,那么在A领导审批完成后,他的审批痕迹能不能强制保留下来,以供下一步处理文档的专员清晰地参考呢? 我们知道,在本地 ...
大话存储pdf 百度网盘_学用系列亲身体验百度网盘内测在线文档，有遗憾也有期待...
随着阿里系的Teambition网盘上线进入倒计时,百度网盘也终于开始发力,除了vip用户扩容11TB的豪举之外,另一个亮点就是上线了内测在线文档功能.胖胖老师也第一手获得了内测资格,今天就和大家分享 ...
大话存储pdf 百度网盘_学用系列｜亲身体验百度网盘内测在线文档，有遗憾也有期待...
随着阿里系的Teambition网盘上线进入倒计时,百度网盘也终于开始发力,除了vip用户扩容11TB的豪举之外,另一个亮点就是上线了内测在线文档功能.胖胖老师也第一手获得了内测资格,今天就和大家分享 ...
在线文档编辑，让团队协作更轻松
编者按:文档管理工具的在线文档能力对企业来说很重要,本文分析了企业该如何选择文档管理工具,并进一步提出了高效安全的文档管理工具--天翎KMS. 概要: (1)在线文档编辑的需求 (2)如何选型文档管理 ...

实现调用本地office打开在线文档功能

实现调用本地office打开在线文档功能相关推荐

最新文章

热门文章