vue实现在线预览office文件

<template>
  <iframe\
    id='iframe'
    :src='url'
    frameborder='0'
    ...
  >
  </iframe>
</template>
 
<script>
...
 
export default {
  name: 'BasicLayout',
  computed: {
    url(){
        return (
            'http://view.xdocin.com/xdoc?_xdoc=文件地址'
        )
    },
  },
}
</script>
 
<style lang="less">
</style>

• 用微软的office online进行在线预览

https://view.officeapps.live.com/op/view.aspx?src=文件地址
例：https://view.officeapps.live.com/op/view.aspx?src=http://www.xxx.com/xxx.ppt

使用office预览功能报错：404

解决方法
通过encode处理一下url地址，可以使用encodeURIComponent()方法
这个文件的服务器地址必须是域名，不可以使用ip地址，且端口需要是80

• 用docx云服务的在线预览

http://view.xdocin.com/xdoc?_xdoc=文件地址
前提是后端提供的文件地址是要公开可访问的链接，比如我们这里是将文件上传到华为云的。文件只支持查看，不能编辑。

测试网址：XDOC文档预览云服务