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
html
<!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两个组件，两个组件内得业务逻辑跟可以 单独配置使用，多个使用继续复制就行了
html
<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容器的id
showtoolbar: 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 两个组件，具体需求可自行配置
代码如下：
html
<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>同时存在是正常得：
