首页 前端知识 Vue2 vue-office/excel 实现在线加载Excel文件预览

Vue2 vue-office/excel 实现在线加载Excel文件预览

2024-09-28 23:09:30 前端知识 前端哥 671 131 我要收藏

一、 GitHub链接:GitHub - 501351981/vue-office: 支持word(.docx)、excel(.xlsx,.xls)、pdf等各类型office文件预览的vue组件集合,提供一站式office文件预览方案,支持vue2和3,也支持React等非Vue框架。Web-based pdf, excel, word preview library

一、 安装VueOfficeExcel插件

npm install @vue-office/excel vue-demi@0.14.6

二、引入VueOfficeExcel组件、样式

import VueOfficeExcel from "@vue-office/excel";

import "@vue-office/excel/lib/index.css";

三、案例代码

<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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18669.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!