vue中怎么实现在线预览office文件的功能，方法有哪些-群英

上一篇：chrome中监听cookie变化的方法操作是什么下一篇：如何理解Vue生命周期和钩子函数的作用和使用

今天这篇我们来学习和了解“vue中怎么实现在线预览office文件的功能，方法有哪些”，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“vue中怎么实现在线预览office文件的功能，方法有哪些”有一定的帮助。有这方面学习需要的朋友就继续往下看吧！

最近在做电子档案，后端提供了文件的华为云的oss链接。已经实现了点击下载文件的功能。但是呢，他们又希望常规的文件，可以直接点击预览，不需要下载。

按道理说，做文件的在线预览，买个第三方服务什么的，后端部署一下服务，前端对接一下，就通通搞定。
顶不住第三方基本上是要money的。那不想掏money，还有什么解决方法呢。

方法一

用微软的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

方法二

用docx云服务的在线预览，用法跟微软差不多

http://view.xdocin.com/xdoc?_xdoc=文件地址

前提是后端提供的文件地址是要公开可访问的链接，比如我们这里是将文件上传到华为云的。文件只支持查看，不能编辑。

效果如下

上代码

    <!-- 预览图标 -->
                  <i
                    v-if="row.doc_url && canPreviewList.includes(row.doc_ext)"
                    style="font-weight: bold;font-size:16px;"
                    class="link-type el-icon-view"
                    @click.stop="previewFileEvent(row)"
                  />

    previewFileEvent(row) {
      const typeArr = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
      let url = ''
      if (typeArr.indexOf(row.doc_ext) !== -1) {
        // 使用微软的office online
        url = 'http://view.officeapps.live.com/op/view.aspx?src=' + row.doc_url
      } else {
        url = row.doc_url
      }
      // window.open()居中打开
      const width = 1000; const height = 800
      const top = (window.screen.availHeight - height) / 2
      const left = (window.screen.availWidth - width) / 2
      window.open(url, '', 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left)
    }