linwe
2024-07-29 6416b40cf242340eaa163c498bd49d8103e73610
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <vue-office-docx :src="docx" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" />
</template>
 
<script>
  //引入VueOfficeDocx组件
  import VueOfficeDocx from '@vue-office/docx'
  //引入相关样式
  import '@vue-office/docx/lib/index.css'
 
  export default {
    components: {
      VueOfficeDocx
    },
    data() {
      return {
        docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址,可以是相对地址
      }
    },
    methods: {
      initWord(url) {
        this.docx = url
      },
      renderedHandler() {
        console.log("渲染完成")
      },
      errorHandler() {
        console.log("渲染失败")
      }
    }
  }
</script>