利用微软的Office Online实现Office文档在线预览功能

微软也已经免费提供在线版本office预览了，一个url就可以访问。
这个文件地址需满足以下几个条件：
1、确保文件是正常的office文件；
2、确保文件在浏览器是可以访问得到；
3、确保是域名访问，IP访问无效；
4、确保访问的url不带端口，带端口的无效。

浏览office文件使用的是微软的免费接口解析文件的，以上条件是微软接口的要求，必须满足才能正常。

https://view.officeapps.live.com/op/view.aspx?src=文件地址

src后面的URL是网上能访问到的文件地址，比如http://abc.com/file/demo.xlsx

直接访问：https://view.officeapps.live.com/op/view.aspx?src=http://abc.com/file/demo.xlsx
直接访问：https://view.officeapps.live.com/op/embed.aspx?src=http://abc.com/file/demo.xlsx
参数：
src：文件链接（不支持本地）
view：只读模式，带功能菜单
embed：只读模式，只有内容区

注意，如果出现打不开的问题:

解决办法：
1、如果是前端js之类，处理办法是给URL采用encodeURIComponent()方法。
2、或者在服务器端转码urlencode(‘URL’)过后输出到前端。

https://view.officeapps.live.com/op/view.aspx?src=encodeURIComponent(http://abc.com/file/demo.xlsx)

<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>

function view(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.com/op/embed.aspx?src='+url
      this.open1=true;
      this.fileUrl = url
    }
}