可以通过https://view.officeapps.live.com/op/view.aspx?src=的形式来预览，亲测有效！！！

window.open(https://view.officeapps.live.com/op/view.aspx?src=${this.filePath} )

web实现office文档在线预览功能——基础积累

最近遇到一个需求，就是要实现多种文档链接的在线预览，最简单的方式就是通过window.open(url地址)的方式来实现。

但是如果要求是在一个弹窗中预览的话，则不能通过window.open来实现了，使用window.open会打开一个新的浏览器标签页。

百度后发现 提供最多的就是 office 文档预览 查看器：

同时支持所有文档类型：word,excel,pdf,ppt等多种格式的最常用就是https://view.xdocin.com/view?src=文档地址

方法1：https://view.xdocin.com/view?src=你的文档地址

对应的官网地址：XDOC文档预览云服务：http://view.xdocin.com/

1.用法：非常简单

<iframe :src="`https://view.xdocin.com/view?src=${encodeURIComponent(fileUrl)}`"
          frameborder="0"
          width="100%"
          height="500"
        ></iframe>

需要用encodeURIComponent将链接转义后，拼接到https://view.xdocin.com/view?src=后面，然后通过iframe标签渲染即可。

2.缺点：使用他们的云服务要收费——为什么没有提收费的问题！！！

这个官网其实是收费项目，至于为啥网上百度出来的预览方法中都没有提到收费问题，我就不清楚了。。。。

通过这个官网预览的文档，会将文档存储到他们的云服务上，一来针对合同之类的内容并不安全，二来存储到他们的云服务器上，只有10天的免费有效期，超过10天及会提示下面的内容了：

添加他们的QQ号之后，有了以下的聊天内容：
注意：不同域名(二级域名也算是不同域名)，每年收费400，这个真是暴力收费了。。。

弃用！！！

2.直接使用iframe标签，但是有些链接可以直接预览，有些链接会直接下载了。

这个好像是链接本身的问题。

网上百度查询的结果是：

以上图片参考的链接：有些链接通过浏览器打开时直接就下载了，参考文章：https://segmentfault.com/q/1010000041756732

最后的结论：有些链接可以预览，有些链接只能下载，是后端来处理，处理一个content-type参数然后返回一个符合要求的链接，我们前端只需要渲染就可以了。

完成！！！

感谢大家的支持！！！