word预览方式---iframe，Microsoft Office Online、xDoc、Google Docs

提示：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>

总结

踩坑路漫漫长@~@

原文地址：https://blog.csdn.net/weixin_44434938/article/details/140843399

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！