mirror of
https://github.com/501351981/vue-office.git
synced 2025-07-15 07:32:19 +08:00
doc:获取二进制文件示例
This commit is contained in:
parent
adc20dbf5f
commit
f7b62649ef
49
README.md
49
README.md
@ -103,6 +103,55 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
**二进制文件预览**
|
||||||
|
|
||||||
|
如果后端给的不是CDN地址,而是一些POST接口,该接口返回二进制流,则可以调用接口获取文件的ArrayBuffer数据,传递给src属性。
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<vue-office-docx
|
||||||
|
:src="docx"
|
||||||
|
style="height: 100vh;"
|
||||||
|
@rendered="rendered"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//引入VueOfficeDocx组件
|
||||||
|
import VueOfficeDocx from '@vue-office/docx'
|
||||||
|
//引入相关样式
|
||||||
|
import '@vue-office/docx/lib/index.css'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
VueOfficeDocx
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
docx: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
fetch('你的API文件地址', {
|
||||||
|
method: 'post'
|
||||||
|
}).then(res=>{
|
||||||
|
//读取文件的arrayBuffer
|
||||||
|
res.arrayBuffer().then(res=>{
|
||||||
|
this.src = res
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
rendered(){
|
||||||
|
console.log("渲染完成")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
### excel文件预览
|
### excel文件预览
|
||||||
|
|
||||||
通过网络地址预览示例如下,通过文件ArrayBuffer预览和上面docx的使用方式一致。
|
通过网络地址预览示例如下,通过文件ArrayBuffer预览和上面docx的使用方式一致。
|
||||||
|
Loading…
x
Reference in New Issue
Block a user