项目场景：后台管理项目中需要展示world、excel等文件

 

---

问题描述

前端预览office插件大多数都是收费的，比如：XDOC文档预览云服务（有试用期）

需要一个免费的且兼容各种文件格式的方法

---

解决方案：

使用微软在线的api，实现全部的office文件预览

前提是需要后端提供文本在线的链接且必须是域名链接  必须是域名链接

'https://view.officeapps.live/op/embed.aspx?src='+ url（文档在线连接）

<el-dialog title="预览" :visible.sync="open1" width="1000px" height="800px" append-to-body>
      <iframe width="900px" height="600px"
        :src='url1'>
      </iframe>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downloadField">下载</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

         look(url){
          //需要判断一下是office文件还是pdf  pdf不用加微软的api
         let str =  url.substring(url.lastIndexOf(".")+1)
          if(str == 'pdf'){
            this.url1 = url
            this.open1=true;
            this.fileUrl = url
          }else{
            this.url1 = 'https://view.officeapps.live/op/embed.aspx?src='+url
            this.open1=true;
            this.fileUrl = url
          }
        },