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

最新推荐文章于 2025-11-13 10:27:00 发布

原创

最新推荐文章于 2025-11-13 10:27:00 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了一个文档管理功能的实现方案，包括文档的上传、下载、删除等基础操作，并重点介绍了如何通过点击文档列表链接调用本地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-col