import{_ as s,c as n,o as a,Q as l}from"./chunks/framework.3816f80c.js";const A=JSON.parse('{"title":"xlsx文件预览","description":"","frontmatter":{},"headers":[],"relativePath":"guide/preview-xlsx.md"}'),p={name:"guide/preview-xlsx.md"},o=l(`

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属性。

`,6),e=[o];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};