网站建设制作免费咨询网页模板dw
luckysheet插件由于是实列挂载到windows.luckysheet实列上，导致同时只能使用一个luckysheet于是我们使用<iframe/>标签进行隔离：
1.每个<iframe>创建独立的浏览器上下文环境，避免多个Luckysheet实例共享同一JavaScript执行环境
2.通过<iframe>的沙箱特性，防止数据污染和CSS样式冲突，确保各实例独立运行
具体iframe介绍可以看一下我之前文章什么是iframe，火爆的微前端解决方案方案，教你快速看懂使用-CSDN博客
官方gitee地址：
Luckysheet: 🚀Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。
1.将下载得Luckysheet放到public/Luckysheet目录下：
Luckysheet: 🚀Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。
public同级创建创建luckysheet.htrml文件
luckysheet.htrml内容如下：
link路径指向public/Luckysheet
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title>luckysheet-wrapper</title><link rel="stylesheet" href="/Luckysheet/plugins/css/pluginsCss.css"><link rel="stylesheet" href="/Luckysheet/plugins/plugins.css"><link rel="stylesheet" href="/Luckysheet/css/luckysheet.css"><link rel="stylesheet" href="/Luckysheet/assets/iconfont/iconfont.css"><script src="/Luckysheet/plugins/js/plugin.js"></script><script src="/Luckysheet/luckysheet.umd.js"></script>
</head>
<body>
<noscript><strong>We're sorry but luckysheet-wrapper doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="sheetContainer" style="margin:0px;padding:0px;position:absolute;width:100%;height:95%;left: 0px;top: 0px;"></div>
<!-- built files will be auto injected -->
</body>
</html>
2.创建 leftExcel.vue 子组件，可以复制多个都是可以单独存在得
这里我创建两个
leftExcel.vue
跟
rightExcel.vue
两个组件，两个组件内得业务逻辑跟可以 单独配置使用，多个使用继续复制就行了
<template><div style="height: 100%; overflow: hidden;"><iframe :id="iframeId" height="100%" width="100%" src="/luckysheet.html" class="no-scroll"></iframe></div>
</template><script setup>
import {ref, onMounted, defineProps} from 'vue';
import * as LuckyExcel from 'luckyexcel';
const iframeId = `iframe${Math.random().toString().substring(2)}`;
const $sheet = ref(null); // 存储luckysheet实例const props = defineProps({options: {type: Object,default: () => ({})},onCreated: {type: Function,default: () => {}}
});
onMounted(() => {const frame = document.querySelector(`#${iframeId}`);frame.onload = () => {$sheet.value = frame.contentWindow.luckysheet;const container = frame.contentDocument.createElement('div');container.id = 'sheetContainer';frame.contentDocument.body.appendChild(container);$sheet.value.create({...props.options, container: container.id});props.onCreated($sheet.value);initLuckysheet();};});
const initLuckysheet = (files) => {LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {if (exportJson.sheets == null || exportJson.sheets.length == 0) return alert('读取excel文件内容失败, 目前不支持XLS文件!');$sheet.value.destroy();$sheet.value.create({data: exportJson.sheets,title: exportJson.info.name,userInfo: exportJson.info.name.creator,container: 'sheetContainer', // 设定DOM容器的idshowtoolbar: false, // 是否显示工具栏showinfobar: false, // 是否显示顶部信息栏showstatisticBar: true, // 是否显示底部计数栏sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置allowEdit: false, // 是否允许前台编辑enableAddRow: false, // 是否允许增加行enableAddCol: false, // 是否允许增加列sheetFormulaBar: true, // 是否显示公式栏enableAddBackTop: false, // 返回头部按钮showsheetbar: true, // 是否显示底部sheet页按钮// 自定义配置底部sheet页按钮showsheetbarConfig: {add: false,menu: false,},});});
};</script><style scoped>
.controls {margin-bottom: 20px;
}.no-scroll {overflow: hidden; /* 隐藏水平和垂直滚动条 */
}
</style>
3. 主内我使用 tabs 页配置左右引入rightExcel跟leftExcel 两个组件，具体需求可自行配置
代码如下：
<template>
<div class="index_body"><el-tabs type="border-card" v-model="activeName" @tab-click="handleClick"><el-tab-pane label="解析模板" name="first"><div class="container"><el-main style="height: calc(100% - 80px); position: relative; padding: 0px"><LeftExcel ref="sheet1" :on-created="(st) => sheet1 = st"></LeftExcel></el-main></div></el-tab-pane><el-tab-pane label="配置模板" name="second"><div class="container"><el-main style="height: calc(100% - 80px); position: relative; padding: 0px"><RightExcel ref="sheet1" :on-created="(st) => sheet1 = st"></RightExcel></el-main></div></el-tab-pane></el-tabs>
</div>
</template><script setup>
// 引入 LeftExcel 和 RightExcel
import LeftExcel from './leftExcel.vue'
import RightExcel from './rightExcel.vue'
import { ref, onMounted, onUnmounted } from 'vue'const activeName = ref('first')const handleClick = (tab, event) => {console.log(tab, event)
}
</script><style lang="scss" scoped>
.index_body{
margin-top: 50px;.container {display: flex;justify-content: space-between; /* 根据需要调整 */align-items: stretch; /* 根据需要调整 */height: 100vh; /* 根据需要调整 */
}.left-component {flex: 1; /* 根据需要调整 */margin-right: 10px; /* 根据需要调整 */
}.right-component {flex: 1; /* 根据需要调整 */margin-left: 10px; /* 根据需要调整 */
}
}
</style>
同时存在是正常得：
