1. 使用网络地址预览

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

2. 上传文件预览

读取文件的ArrayBuffer

1<template>
2    <div>
3        <input type="file" @change="changeHandle"/>
4        <vue-office-docx :src="src"/>
5    </div>
6</template>
7
8<script>
9import VueOfficeDocx from '@vue-office/docx'
10import '@vue-office/docx/lib/index.css'
11
12export default {
13    components: {
14        VueOfficeDocx
15    },
16    data(){
17        return {
18            src: ''
19        }
20    },
21    methods:{
22        changeHandle(event){
23            let file = event.target.files[0]
24            let fileReader = new FileReader()
25            fileReader.readAsArrayBuffer(file)
26            fileReader.onload =  () => {
27                this.src = fileReader.result
28            }
29        }
30    }
31}
32</script>

3. 二进制文件预览

如果后端给的不是CDN地址，而是一些POST接口，该接口返回二进制流，则可以调用接口获取文件的ArrayBuffer数据，传递给src属性。

1<template>
2    <vue-office-docx
3        :src="docx"
4        style="height: 100vh;"
5        @rendered="rendered"
6    />
7</template>
8
9<script>
10//引入VueOfficeDocx组件
11import VueOfficeDocx from '@vue-office/docx'
12//引入相关样式
13import '@vue-office/docx/lib/index.css'
14
15export default {
16    components:{
17        VueOfficeDocx
18    },
19    data(){
20        return {
21            docx: ''
22        }
23    },
24    mounted(){
25        fetch('你的API文件地址', {
26            method: 'post'
27        }).then(res=>{
28            //读取文件的arrayBuffer
29            res.arrayBuffer().then(res=>{
30                this.docx = res
31            })
32        })
33    },
34    methods:{
35        rendered(){
36            console.log("渲染完成")
37        }
38    }
39}
40</script>

通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。

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

通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。

1<template>
2    <vue-office-pdf
3        :src="pdf"
4        style="height: 100vh"
5        @rendered="renderedHandler"
6        @error="errorHandler"
7    />
8</template>
9
10<script>
11//引入VueOfficePdf组件
12import VueOfficePdf from '@vue-office/pdf'
13
14export default {
15    components: {
16        VueOfficePdf
17    },
18    data() {
19        return {
20            pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
21        }
22    },
23    methods: {
24        renderedHandler() {
25            console.log("渲染完成")
26        },
27        errorHandler() {
28            console.log("渲染失败")
29        }
30    }
31}
32</script>

通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。

1<template>
2    <vue-office-pptx
3        :src="pdf"
4        style="height: 100vh"
5        @rendered="renderedHandler"
6        @error="errorHandler"
7    />
8</template>
9
10<script>
11import VueOfficePptx from '@vue-office/pptx'
12
13export default {
14    components: {
15        VueOfficePptx
16    },
17    data() {
18        return {
19            pdf: 'http://****/test.pptx' //设置文档地址
20        }
21    },
22    methods: {
23        renderedHandler() {
24            console.log("渲染完成")
25        },
26        errorHandler() {
27            console.log("渲染失败")
28        }
29    }
30}
31</script>