mirror of
https://github.com/501351981/vue-office.git
synced 2025-06-25 07:08:58 +08:00
47 lines
956 B
Markdown
47 lines
956 B
Markdown
# xlsx文件预览
|
||
::: warning
|
||
目前只支持xlsx文件预览，不支持xls文件。
|
||
:::
|
||
|
||
## 使用网络地址预览
|
||
|
||
```vue
|
||
<template>
|
||
<vue-office-excel
|
||
:src="excel"
|
||
style="height: 100vh;"
|
||
@rendered="renderedHandler"
|
||
@error="errorHandler"
|
||
/>
|
||
</template>
|
||
|
||
<script>
|
||
//引入VueOfficeExcel组件
|
||
import VueOfficeExcel from '@vue-office/excel'
|
||
//引入相关样式
|
||
import '@vue-office/excel/lib/index.css'
|
||
|
||
export default {
|
||
components: {
|
||
VueOfficeExcel
|
||
},
|
||
data() {
|
||
return {
|
||
excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
|
||
}
|
||
},
|
||
methods: {
|
||
renderedHandler() {
|
||
console.log("渲染完成")
|
||
},
|
||
errorHandler() {
|
||
console.log("渲染失败")
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## 上传文件预览
|
||
|
||
和docx的上传文件预览一样，获取文件的ArrayBuffer，传给组件的src属性。 |