实现调用本地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;//打开word
      if (url.indexOf(".ppt") != -1)
         this.openUrlhref = 'ms-powerpoint:ofe|u|'+url;//打开ppt
      if (url.indexOf(".xls") != -1)
         this.openUrlhref = 'ms-excel:ofe|u|'+url;//打开excel
      if(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

三、效果图