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

一、 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>