# multiple-luckysheet

**Repository Path**: yes-i-am/multiple-luckysheet

## Basic Information

- **Project Name**: multiple-luckysheet
- **Description**: 这是一个实现一个页面多个luckysheet实例的方案demo
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 1
- **Created**: 2023-12-07
- **Last Updated**: 2025-05-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# multiple-luckysheet

#### 介绍
这是一个实现一个页面多个luckysheet实例的方案demo

项目是基于社区案例 [luckysheet-vue-importAndExport](https://github.com/oy-paddy/luckysheet-vue-importAndExport/tree/master/) 来进行改造的

## 实现方案简述
1. 项目新增一个luckysheet.html页面在public文件夹中，具体内容可查看项目中的文件。当项目启动时，这个文件会自动复制到打包的根目录中。可以通过 '/luckysheet.html'访问
2. 在项目中新增一个组件，包含一个iframe标签, iframe的地址就是'/luckysheet.html'
3. 组件内可以通过iframe实例的.contentWindow.luckysheet 获取到luckysheet的操作对象，其余的操作就跟直接使用luckysheet是一样的

## 演示
![演示动画](public/demo.gif)

## 开始

### 环境
[Node.js](https://nodejs.org/en/) Version >= 6 

### 安装 (我本地测试用了pnpm)
```
pnpm install

// 如果需要测试导入导出，请安装下面的包
pnpm install exceljs
pnpm install FileSaver
```
### 开发
```
pnpm serve
```
如果你的node版本是<17 的，需要把serve配置中的 "set NODE_OPTIONS=--openssl-legacy-provider &" 删掉

### 打包
```
pnpm build
```
如果你的node版本是<17 的，需要把serve配置中的 "set NODE_OPTIONS=--openssl-legacy-provider &" 删掉