采用 luckysheet

luckysheet官方文档： 快速上手 | Luckysheet文档

打不开用下面的

luckysheet文档

本文采用的是CDN引入

1、首先在index.html中引入

 <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
  <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

2、在所需要展示的页面首先创建一个容器

<div class="edit">
     <div id="luckysheet"   style="margin:0;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
</div>

3、配置excel

const init = () => {
    const options = {
        container: 'luckysheet', // luckysheet为容器id
        // title: 'luckysheet', // 表 头名
        lang: 'zh' // 中文
    }
    window.luckysheet.create(options)
}
onMounted(() => {
    init()
})

4、效果展示

5、如果需要隐藏头部部分

.edit {
            position: relative;
            width:100%;
            height:100%
            :deep(.luckysheet_info_detail) {
                display: none !important;
            }
        }