提示：word预览方式—iframe

文章目录

• • @[TOC](文章目录)
• 前言
• 一、Microsoft Office Online
• 二、xDoc
• 三、Google Docs
• 四、预览组件
• 总结

前言

使用@vue/cli脚手架vue create创建

一、Microsoft Office Online

https://view.officeapps.live.com/op/view.aspx?src=

二、xDoc

https://view.xdocin.com/xdoc?_xdoc=

三、Google Docs

https://docs.google.com/gview?url=

由于网络限制，无法访问，所以未作截图

四、预览组件

1、iframePreviewDoc.vue

<template>
    <div class="preview_box">
      <iframe :src="officeDoc + src" frameborder="0" width="1200" height="1000"></iframe>
    </div>
  </template>

<script>
  export default {
    name: 'preview',
    data () {
      return {
        src:encodeURIComponent(`.docx文件rul`),
        googleDoc:'https://docs.google.com/gview?url=',
        xDoc:'https://view.xdocin.com/xdoc?_xdoc=',
        officeDoc:'https://view.officeapps.live.com/op/view.aspx?src=',
      }
    },
  }
  </script>
<style scoped></style>

总结

踩坑路漫漫长@~@