vue3+luckysheet实现在线编辑Excel的项目实践
作者：Passerby_K
本文介绍了使用Luckysheet实现在线Excel表格功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
效果图奉上：
引入的依赖：
"dependencies": {
"@types/jquery": "^3.5.32",
"@types/xlsx": "^0.0.36",
"jquery": "^3.7.1",
"xlsx": "^0.18.5",
}在index.html中引入：
<!-- Luckysheet CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/plugins/css/pluginsCss.css" rel="external nofollow" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/plugins/plugins.css" rel="external nofollow" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/css/luckysheet.css" rel="external nofollow" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/assets/iconfont/iconfont.css" rel="external nofollow" />
<!-- jQuery 和 Luckysheet 的JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<!-- jQuery mousewheel 插件 -->
<script src="https://cdn.jsdelivr.net/npm/jquery-mousewheel@3.1.13/jquery.mousewheel.min.js"></script>
<!-- XLSX 库 -->
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/luckysheet.umd.js"></script>完整代码块
<template>
<div class="luckysheet-container">
<!-- 工具栏 -->
<div class="toolbar">
<el-button type="primary" @click="importExcel">
<el-icon>
<Upload />
</el-icon>
导入Excel
</el-button>
<el-button type="success" @click="exportExcel">
<el-icon>
<Download />
</el-icon>
导出Excel
</el-button>
<el-button type="warning" @click="clearData">
<el-icon>
<Delete />
</el-icon>
清空数据
</el-button>
<el-button type="info" @click="addSheet">
<el-icon>
<Plus />
</el-icon>
添加工作表
</el-button>
<el-button type="success" @click="getData">
<el-icon>
<Document />
</el-icon>
保存
</el-button>
<!-- <el-button type="info" @click="printSheet">
<el-icon>
<Document />
</el-icon>
打印
</el-button> -->
</div>
<!-- 隐藏的文件输入框 -->
<input ref="fileInput" type="file" accept=".xlsx,.xls" style="display: none" @change="handleFileChange" />
<!-- Luckysheet容器 -->
<div id="luckysheet" class="luckysheet-wrapper" ref="luckysheetRef"></div>
</div>
</template>
<script setup lang="ts">
declare global {
interface Window {
luckysheet: any;
XLSX: any;
$: any;
jQuery: any;
}
}
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Upload, Download, Delete, Plus, Document } from '@element-plus/icons-vue'
// 响应式数据
const fileInput = ref<HTMLInputElement>()
let luckysheetInstance: any = null
const luckysheetRef = ref<HTMLDivElement>()
// 默认数据
const defaultData = [
{
name: 'Sheet1',
color: '',
index: 0,
status: 1,
order: 0,
hide: 0,
row: 36,
column: 18,
defaultRowHeight: 19,
defaultColWidth: 73,
celldata: [
{
r: 0,
c: 0,
v: {
v: '欢迎使用Luckysheet在线编辑器',
ct: { fa: 'General', t: 'g' },
m: '欢迎使用Luckysheet在线编辑器',
bg: '#f4f5f8',
bl: 1,
it: 0,
ff: 0,
fs: 14,
fc: '#000000',
cl: 0,
un: 0,
vt: 0
}
},
{
r: 1,
c: 0,
v: {
v: '这是一个示例表格',
ct: { fa: 'General', t: 'g' },
m: '这是一个示例表格',
bg: '#ffffff',
bl: 0,
it: 0,
ff: 0,
fs: 12,
fc: '#000000',
cl: 0,
un: 0,
vt: 0
}
}
] as any[],
config: {},
scrollLeft: 0,
scrollTop: 0,
luckysheet_select_save: [],
calcChain: [],
isPivotTable: false,
pivotTable: {},
filter_select: {},
filter: null,
luckysheet_alternateformat_save: [],
luckysheet_alternateformat_save_modelCustom: [],
luckysheet_conditionformat_save: {},
frozen: {},
chart: [],
zoomRatio: 1,
image: [],
showGridLines: 1,
dataVerification: {}
}
]
// 初始化Luckysheet
const initLuckysheet = (): Promise<boolean> => {
return new Promise((resolve) => {
console.log('开始初始化Luckysheet...')
console.log('window.luckysheet:', window.luckysheet)
// 检查容器是否存在
const container = document.getElementById('luckysheet')
console.log('容器元素:', container)
if (!container) {
console.error('找不到luckysheet容器')
resolve(false)
return
}
// 清空容器
container.innerHTML = ''
const options = {
container: 'luckysheet',
title: '在线Excel编辑器',
lang: 'zh',
data: defaultData,
showinfobar: true,
showsheetbar: true,
showstatisticBar: true,
enableAddRow: true,
enableAddCol: true,
userInfo: false,
myFolderUrl: '',
showtoolbar: true,
showtoolbarConfig: {
// 隐藏Luckysheet自带打印按钮
print: false
},
hook: {
cellEditBefore: (r: number, c: number, value: any) => {
console.log('编辑前:', r, c, value)
return value
},
cellEditAfter: (r: number, c: number, oldValue: any, newValue: any) => {
console.log('编辑后:', r, c, oldValue, newValue)
},
cellUpdated: (r: number, c: number, oldValue: any, newValue: any) => {
console.log('单元格更新:', r, c, oldValue, newValue)
}
}
}
try {
console.log('创建Luckysheet实例...')
console.log('使用的配置:', options)
// 直接调用全局方法
window.luckysheet.create(options)
// 检查是否创建成功
setTimeout(() => {
const sheets = window.luckysheet.getAllSheets()
console.log('初始化后获取到的sheets:', sheets)
if (sheets && sheets.length > 0) {
console.log('Luckysheet初始化成功')
luckysheetInstance = window.luckysheet // 使用全局对象作为实例
resolve(true)
} else {
console.error('Luckysheet初始化失败，没有获取到sheets')
resolve(false)
}
}, 1000)
} catch (error) {
console.error('创建Luckysheet实例失败:', error)
resolve(false)
}
})
}
// 等待Luckysheet加载
const waitForLuckysheet = (maxAttempts = 10): Promise<boolean> => {
return new Promise((resolve) => {
let attempts = 0
const checkLuckysheet = () => {
attempts++
console.log(`检查Luckysheet加载状态 (${attempts}/${maxAttempts})`)
if (window.luckysheet && typeof window.luckysheet.create === 'function') {
console.log('Luckysheet已加载完成')
resolve(true)
} else if (attempts >= maxAttempts) {
console.error('Luckysheet加载超时')
resolve(false)
} else {
setTimeout(checkLuckysheet, 500)
}
}
checkLuckysheet()
})
}
// 导入Excel文件
const importExcel = () => {
console.log('importExcel被调用')
console.log('window.XLSX:', window.XLSX)
// 检查XLSX库是否可用
if (!window.XLSX || !window.XLSX.utils) {
ElMessage.error('XLSX库未加载，请刷新页面重试')
return
}
fileInput.value?.click()
}
// 处理文件选择
const handleFileChange = async (event: Event) => {
const target = event.target as HTMLInputElement
const file = target.files?.[0]
if (!file) return
console.log('选择的文件:', file.name, file.size)
try {
ElMessage.info('正在解析Excel文件...')
const data = await parseExcelFile(file)
console.log('解析到的数据:', data)
if (data && data.length > 0) {
// 直接进行重新初始化，不再检查可用方法
console.log('开始加载数据到Luckysheet...')
console.log('解析到的数据:', data)
try {
// 直接使用重新初始化的方式，避免transToData的错误
console.log('跳过transToData方法，直接重新初始化...')
ElMessage.info('正在加载Excel数据...')
const initSuccess = await initLuckysheetWithData(data)
if (initSuccess) {
// 初始化成功后，检查导入结果
setTimeout(() => {
try {
const sheets = window.luckysheet.getAllSheets()
console.log('导入完成，检查结果:')
console.log('- 工作表数量:', sheets.length)
sheets.forEach((sheet: any, index: number) => {
console.log(`- 工作表 ${index}: ${sheet.name}`)
console.log(` - 行数: ${sheet.row}`)
console.log(` - 列数: ${sheet.column}`)
console.log(` - 单元格数据: ${sheet.celldata ? sheet.celldata.length : 0} 个`)
if (sheet.config && sheet.config.merge) {
console.log(` - 合并单元格: ${sheet.config.merge.length} 个`)
}
})
// 显示成功消息
const totalCells = sheets.reduce((total: number, sheet: any) => {
return total + (sheet.celldata ? sheet.celldata.length : 0)
}, 0)
// 生成详细的导入报告
const importReport = {
totalSheets: sheets.length,
totalCells,
sheets: sheets.map((sheet: any) => ({
name: sheet.name,
cells: sheet.celldata ? sheet.celldata.length : 0,
rows: sheet.row,
columns: sheet.column
}))
}
console.log('导入报告:', importReport)
// 显示详细成功消息
const sheetDetails = importReport.sheets.map(s =>
`${s.name}(${s.cells}个单元格)`
).join('、')
ElMessage.success(`Excel文件导入成功！共导入 ${importReport.totalSheets} 个工作表，${importReport.totalCells} 个单元格数据`)
console.log(`工作表详情: ${sheetDetails}`)
// 显示合并单元格检测信息
if (data.some((sheet: any) => sheet.config && sheet.config.merge && sheet.config.merge.length > 0)) {
const mergeInfo = data
.filter((sheet: any) => sheet.config && sheet.config.merge && sheet.config.merge.length > 0)
.map((sheet: any) => `${sheet.name}(${sheet.config.merge.length}个)`)
.join('、')
console.log(`检测到合并单元格: ${mergeInfo}`)
ElMessage.info(`注意：检测到合并单元格但暂时未应用，以避免显示错误`)
}
} catch (error) {
console.error('检查导入结果时出错:', error)
ElMessage.success('Excel文件导入成功！')
}
}, 500)
} else {
ElMessage.error('表格初始化失败，请刷新页面重试')
}
} catch (loadError) {
console.error('加载数据失败:', loadError)
ElMessage.error('加载数据失败: ' + (loadError instanceof Error ? loadError.message : '未知错误'))
}
} else {
ElMessage.warning('Excel文件为空或格式不正确')
}
} catch (error) {
console.error('导入Excel失败:', error)
const errorMessage = error instanceof Error ? error.message : '未知错误'
ElMessage.error('导入Excel失败: ' + errorMessage)
}
target.value = ''
}
// 使用新数据初始化Luckysheet
const initLuckysheetWithData = (data: any[]): Promise<boolean> => {
return new Promise((resolve) => {
console.log('开始使用新数据初始化Luckysheet...')
console.log('新数据:', data)
// 检查容器是否存在
const container = document.getElementById('luckysheet')
console.log('容器元素:', container)
if (!container) {
console.error('找不到luckysheet容器')
resolve(false)
return
}
// 清空容器
container.innerHTML = ''
// 验证和清理数据
const cleanData = data.map((sheet: any, index: number) => {
console.log(`清理工作表 ${index}:`, sheet.name)
// 确保必要的字段存在
const cleanSheet = {
name: sheet.name || `Sheet${index + 1}`,
color: sheet.color || '',
index: sheet.index || index,
status: sheet.status || 1,
order: sheet.order || index,
hide: sheet.hide || 0,
row: Math.max(sheet.row || 36, 36),
column: Math.max(sheet.column || 18, 18),
defaultRowHeight: sheet.defaultRowHeight || 19,
defaultColWidth: sheet.defaultColWidth || 73,
celldata: Array.isArray(sheet.celldata) ? sheet.celldata : [],
config: sheet.config || {},
scrollLeft: sheet.scrollLeft || 0,
scrollTop: sheet.scrollTop || 0,
luckysheet_select_save: sheet.luckysheet_select_save || [],
calcChain: sheet.calcChain || [],
isPivotTable: sheet.isPivotTable || false,
pivotTable: sheet.pivotTable || {},
filter_select: sheet.filter_select || {},
filter: sheet.filter || null,
luckysheet_alternateformat_save: sheet.luckysheet_alternateformat_save || [],
luckysheet_alternateformat_save_modelCustom: sheet.luckysheet_alternateformat_save_modelCustom || [],
luckysheet_conditionformat_save: sheet.luckysheet_conditionformat_save || {},
frozen: sheet.frozen || {},
chart: sheet.chart || [],
zoomRatio: sheet.zoomRatio || 1,
image: sheet.image || [],
showGridLines: sheet.showGridLines || 1,
dataVerification: sheet.dataVerification || {}
}
// 暂时禁用合并单元格处理以避免内部错误
if (cleanSheet.config.merge) {
console.log(`工作表 ${index} 移除合并单元格配置以避免内部错误`)
delete cleanSheet.config.merge
}
console.log(`清理后的工作表 ${index}:`, cleanSheet)
return cleanSheet
})
const options = {
container: 'luckysheet',
title: '在线Excel编辑器',
lang: 'zh',
data: cleanData,
showinfobar: true,
showsheetbar: true,
showstatisticBar: true,
enableAddRow: true,
enableAddCol: true,
userInfo: false,
myFolderUrl: '',
showtoolbar: true,
showtoolbarConfig: {
// 隐藏Luckysheet自带打印按钮
print: false
},
hook: {
cellEditBefore: (r: number, c: number, value: any) => {
console.log('编辑前:', r, c, value)
return value
},
cellEditAfter: (r: number, c: number, oldValue: any, newValue: any) => {
console.log('编辑后:', r, c, oldValue, newValue)
},
cellUpdated: (r: number, c: number, oldValue: any, newValue: any) => {
console.log('单元格更新:', r, c, oldValue, newValue)
}
}
}
try {
console.log('使用新数据创建Luckysheet实例...')
console.log('使用的配置:', options)
// 直接调用全局方法
window.luckysheet.create(options)
// 检查是否创建成功
setTimeout(() => {
try {
const sheets = window.luckysheet.getAllSheets()
console.log('重新初始化后获取到的sheets:', sheets)
if (sheets && sheets.length > 0) {
console.log('Luckysheet重新初始化成功')
luckysheetInstance = window.luckysheet // 使用全局对象作为实例
resolve(true)
} else {
console.error('Luckysheet重新初始化失败，没有获取到sheets')
resolve(false)
}
} catch (error) {
console.error('检查初始化结果时出错:', error)
// 即使有错误，如果容器中有内容，也认为初始化成功
if (container.children.length > 0) {
console.log('容器中有内容，认为初始化成功')
luckysheetInstance = window.luckysheet
resolve(true)
} else {
resolve(false)
}
}
}, 1000)
} catch (error) {
console.error('使用新数据创建Luckysheet实例失败:', error)
resolve(false)
}
})
}
// 解析Excel文件
const parseExcelFile = (file: File): Promise<any[]> => {
return new Promise((resolve, reject) => {
console.log('开始解析Excel文件...')
console.log('文件信息:', {
name: file.name,
size: file.size,
type: file.type,
lastModified: file.lastModified
})
// 检查XLSX库是否可用
if (!window.XLSX || !window.XLSX.utils) {
console.error('XLSX库未加载')
reject(new Error('XLSX库未加载'))
return
}
// 检查文件类型
const validTypes = [
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
'application/vnd.ms-excel', // .xls
'application/octet-stream' // 某些系统可能显示为这个类型
]
if (!validTypes.includes(file.type) && !file.name.match(/\.(xlsx|xls)$/i)) {
console.error('不支持的文件类型:', file.type)
reject(new Error('不支持的文件类型，请选择.xlsx或.xls文件'))
return
}
const reader = new FileReader()
reader.onload = (e) => {
try {
console.log('文件读取完成，开始解析...')
const result = e.target?.result
console.log('读取结果类型:', typeof result)
if (!result) {
reject(new Error('文件读取结果为空'))
return
}
const data = new Uint8Array(result as ArrayBuffer)
console.log('转换为Uint8Array，长度:', data.length)
// 尝试不同的解析方式
let workbook
try {
workbook = window.XLSX.read(data, { type: 'array', cellStyles: true })
} catch (readError) {
console.error('使用array类型解析失败，尝试binary类型:', readError)
try {
workbook = window.XLSX.read(data, { type: 'binary', cellStyles: true })
} catch (binaryError) {
console.error('使用binary类型解析也失败:', binaryError)
reject(new Error('无法解析Excel文件，请检查文件格式'))
return
}
}
console.log('工作簿解析成功:', workbook)
console.log('工作表名称:', workbook.SheetNames)
if (!workbook.SheetNames || workbook.SheetNames.length === 0) {
reject(new Error('Excel文件中没有找到工作表'))
return
}
const sheets = workbook.SheetNames.map((sheetName: string, index: number) => {
console.log(`处理工作表: ${sheetName}`)
const worksheet = workbook.Sheets[sheetName]
if (!worksheet) {
console.warn(`工作表 ${sheetName} 为空`)
return {
name: sheetName,
color: '',
index,
status: 1,
order: index,
hide: 0,
row: 36,
column: 18,
defaultRowHeight: 19,
defaultColWidth: 73,
celldata: [],
config: {},
scrollLeft: 0,
scrollTop: 0,
luckysheet_select_save: [],
calcChain: [],
isPivotTable: false,
pivotTable: {},
filter_select: {},
filter: null,
luckysheet_alternateformat_save: [],
luckysheet_alternateformat_save_modelCustom: [],
luckysheet_conditionformat_save: {},
frozen: {},
chart: [],
zoomRatio: 1,
image: [],
showGridLines: 1,
dataVerification: {}
}
}
// 获取单元格范围
const range = window.XLSX.utils.decode_range(worksheet['!ref'] || 'A1')
console.log(`工作表 ${sheetName} 范围:`, range)
const celldata: any[] = []
const merges: any[] = []
// 处理合并单元格 - 暂时禁用以避免mergeCalculation错误
if (worksheet['!merges']) {
console.log(`工作表 ${sheetName} 检测到合并单元格:`, worksheet['!merges'].length, '个')
console.log('注意：合并单元格已识别但暂时禁用以避免内部错误')
// 暂时注释掉合并单元格处理，但保留识别信息
/*
worksheet['!merges'].forEach((merge: any, mergeIndex: number) => {
try {
// 确保合并单元格数据格式正确
const mergeData = {
r: merge.s.r,
c: merge.s.c,
rs: merge.e.r - merge.s.r + 1,
cs: merge.e.c - merge.s.c + 1
}
// 验证合并单元格数据
if (mergeData.r >= 0 && mergeData.c >= 0 &&
mergeData.rs > 0 && mergeData.cs > 0 &&
mergeData.r + mergeData.rs <= range.e.r + 1 &&
mergeData.c + mergeData.cs <= range.e.c + 1) {
merges.push(mergeData)
console.log(`合并单元格 ${mergeIndex}:`, mergeData)
} else {
console.warn(`跳过无效的合并单元格 ${mergeIndex}:`, mergeData)
}
} catch (mergeError) {
console.warn(`处理合并单元格 ${mergeIndex} 时出错:`, mergeError)
}
})
*/
}
// 遍历所有单元格
for (let r = range.s.r; r <= range.e.r; r++) {
for (let c = range.s.c; c <= range.e.c; c++) {
const cellAddress = window.XLSX.utils.encode_cell({ r, c })
const cell = worksheet[cellAddress]
if (cell) {
const cellData: any = {
r,
c,
v: {
v: cell.v,
ct: { fa: 'General', t: 'g' },
m: String(cell.v),
// 只有有背景色时才加bg字段
...(cell.s && cell.s.fill && cell.s.fill.fgColor && cell.s.fill.fgColor.rgb
? { bg: '#' + cell.s.fill.fgColor.rgb.substring(2) }
: {}),
bl: 0,
it: 0,
ff: 0,
fs: 10,
fc: '#000000',
cl: 0,
un: 0,
vt: 0
}
}
// 处理单元格格式
if (cell.s) {
const style = cell.s
// 字体格式
if (style.font) {
if (style.font.bold) cellData.v.bl = 1
if (style.font.italic) cellData.v.it = 1
if (style.font.size) cellData.v.fs = style.font.size
if (style.font.color) {
const color = style.font.color
if (color.rgb) {
cellData.v.fc = '#' + color.rgb.substring(2)
}
}
}
// 背景色
if (style.fill) {
if (style.fill.fgColor) {
const bgColor = style.fill.fgColor
if (bgColor.rgb) {
cellData.v.bg = '#' + bgColor.rgb.substring(2)
}
}
}
// 对齐方式
if (style.alignment) {
const alignment = style.alignment
if (alignment.horizontal) {
switch (alignment.horizontal) {
case 'left':
cellData.v.ff = 0
break
case 'center':
cellData.v.ff = 1
break
case 'right':
cellData.v.ff = 2
break
}
}
if (alignment.vertical) {
switch (alignment.vertical) {
case 'top':
cellData.v.vt = 0
break
case 'middle':
cellData.v.vt = 1
break
case 'bottom':
cellData.v.vt = 2
break
}
}
}
// 边框
if (style.border) {
const border = style.border
if (border.top || border.bottom || border.left || border.right) {
cellData.v.cl = 1
}
}
}
// 处理数字格式
if (cell.t === 'n' && cell.z) {
cellData.v.ct = { fa: cell.z, t: 'n' }
} else if (cell.t === 'd') {
cellData.v.ct = { fa: 'yyyy-mm-dd', t: 'd' }
} else if (cell.t === 'b') {
cellData.v.ct = { fa: 'General', t: 'b' }
}
celldata.push(cellData)
}
}
}
console.log(`工作表 ${sheetName} 转换后的celldata:`, celldata)
console.log(`工作表 ${sheetName} 合并单元格:`, merges)
// 验证数据完整性
if (celldata.length === 0) {
console.warn(`工作表 ${sheetName} 没有数据，添加默认单元格`)
celldata.push({
r: 0,
c: 0,
v: {
v: '',
ct: { fa: 'General', t: 'g' },
m: '',
bg: '#ffffff',
bl: 0,
it: 0,
ff: 0,
fs: 10,
fc: '#000000',
cl: 0,
un: 0,
vt: 0
}
})
}
// 创建工作表配置 - 不处理边框
const sheetConfig: any = {}
// 不再赋值borderInfo，保持默认网格线
return {
name: sheetName,
color: '',
index,
status: 1,
order: index,
hide: 0,
row: Math.max(range.e.r + 1, 36),
column: Math.max(range.e.c + 1, 18),
defaultRowHeight: 19,
defaultColWidth: 73,
celldata,
config: sheetConfig,
scrollLeft: 0,
scrollTop: 0,
luckysheet_select_save: [],
calcChain: [],
isPivotTable: false,
pivotTable: {},
filter_select: {},
filter: null,
luckysheet_alternateformat_save: [],
luckysheet_alternateformat_save_modelCustom: [],
luckysheet_conditionformat_save: {},
frozen: {},
chart: [],
zoomRatio: 1,
image: [],
showGridLines: 1,
dataVerification: {}
}
})
console.log('所有工作表转换完成:', sheets)
resolve(sheets)
} catch (error) {
console.error('解析Excel文件时出错:', error)
reject(error)
}
}
reader.onerror = (error) => {
console.error('文件读取失败:', error)
reject(new Error('文件读取失败'))
}
reader.onprogress = (event) => {
if (event.lengthComputable) {
const progress = (event.loaded / event.total) * 100
console.log(`文件读取进度: ${progress.toFixed(2)}%`)
}
}
console.log('开始读取文件...')
reader.readAsArrayBuffer(file)
})
}
// 导出Excel
const exportExcel = async () => {
console.log('exportExcel被调用')
console.log('luckysheetInstance:', luckysheetInstance)
console.log('window.luckysheet:', window.luckysheet)
console.log('window.XLSX:', window.XLSX)
try {
// 检查XLSX库是否可用
if (!window.XLSX || !window.XLSX.utils) {
ElMessage.error('XLSX库未加载，请刷新页面重试')
return
}
// 检查是否有可用的Luckysheet实例
const availableInstance = luckysheetInstance || window.luckysheet
if (!availableInstance || typeof availableInstance.getAllSheets !== 'function') {
console.log('Luckysheet实例不可用，尝试重新初始化...')
// 等待Luckysheet加载
const isLoaded = await waitForLuckysheet()
if (!isLoaded) {
ElMessage.error('Luckysheet加载失败，请刷新页面重试')
return
}
// 尝试初始化
const initSuccess = await initLuckysheet()
if (initSuccess) {
// 等待初始化完成
setTimeout(() => {
exportExcel()
}, 1500)
} else {
ElMessage.error('表格初始化失败，请刷新页面重试')
}
return
}
ElMessage.info('正在导出Excel文件...')
console.log('开始导出，使用实例:', availableInstance)
const data = availableInstance.getAllSheets()
console.log('获取到的数据:', data)
if (!data || data.length === 0) {
ElMessage.warning('没有数据可导出')
return
}
const workbook = window.XLSX.utils.book_new()
data.forEach((sheet: any, index: number) => {
console.log(`处理工作表 ${index}:`, sheet.name)
const sheetData: any[][] = []
const celldata = Array.isArray(sheet.celldata) ? sheet.celldata : []
if (celldata.length === 0) {
console.log(`工作表 ${sheet.name} 为空，创建空工作表`)
const worksheet = window.XLSX.utils.aoa_to_sheet([['']])
window.XLSX.utils.book_append_sheet(workbook, worksheet, sheet.name)
return
}
// 计算最大行列
const maxRow = Math.max(...celldata.map((cell: any) => cell.r)) + 1
const maxCol = Math.max(...celldata.map((cell: any) => cell.c)) + 1
console.log(`工作表 ${sheet.name} 大小: ${maxRow}行 x ${maxCol}列`)
// 初始化二维数组
for (let r = 0; r < maxRow; r++) {
sheetData[r] = []
for (let c = 0; c < maxCol; c++) {
sheetData[r][c] = ''
}
}
// 填充数据
celldata.forEach((cell: any) => {
if (cell.v && cell.v.v !== undefined) {
sheetData[cell.r][cell.c] = cell.v.v
}
})
console.log(`工作表 ${sheet.name} 数据:`, sheetData)
const worksheet = window.XLSX.utils.aoa_to_sheet(sheetData)
window.XLSX.utils.book_append_sheet(workbook, worksheet, sheet.name)
})
const fileName = `luckysheet_export_${new Date().getTime()}.xlsx`
console.log('导出文件名:', fileName)
window.XLSX.writeFile(workbook, fileName)
ElMessage.success('Excel文件导出成功！')
} catch (error) {
console.error('导出Excel失败:', error)
const errorMessage = error instanceof Error ? error.message : '未知错误'
ElMessage.error('导出Excel失败: ' + errorMessage)
}
}
// 清空数据
const clearData = async () => {
try {
await ElMessageBox.confirm('确定要清空所有数据吗？此操作不可恢复。', '确认清空', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
console.log('开始清空数据...')
// 重新初始化 Luckysheet 使用默认数据
const success = await initLuckysheetWithData(defaultData)
if (success) {
ElMessage.success('数据已清空')
} else {
ElMessage.error('清空数据失败，请刷新页面重试')
}
} catch (error) {
if (error !== 'cancel') {
console.error('清空数据失败:', error)
ElMessage.error('清空数据失败')
}
}
}
// 添加工作表
const addSheet = async () => {
try {
console.log('开始添加工作表...')
// 获取当前所有工作表
let currentSheets: any[] = []
if (window.luckysheet && typeof window.luckysheet.getAllSheets === 'function') {
currentSheets = window.luckysheet.getAllSheets() || []
}
console.log('当前工作表数量:', currentSheets.length)
const sheetCount = currentSheets.length
const newSheet = {
name: `Sheet${sheetCount + 1}`,
color: '',
index: sheetCount,
status: 1,
order: sheetCount,
hide: 0,
row: 36,
column: 18,
defaultRowHeight: 19,
defaultColWidth: 73,
celldata: [] as any[],
config: {},
scrollLeft: 0,
scrollTop: 0,
luckysheet_select_save: [],
calcChain: [],
isPivotTable: false,
pivotTable: {},
filter_select: {},
filter: null,
luckysheet_alternateformat_save: [],
luckysheet_alternateformat_save_modelCustom: [],
luckysheet_conditionformat_save: {},
frozen: {},
chart: [],
zoomRatio: 1,
image: [],
showGridLines: 1,
dataVerification: {}
}
console.log('新工作表配置:', newSheet)
// 合并现有工作表和新工作表
const newData = [...currentSheets, newSheet]
console.log('合并后的数据:', newData)
// 重新初始化 Luckysheet 使用新数据
const success = await initLuckysheetWithData(newData)
if (success) {
ElMessage.success('工作表添加成功')
} else {
ElMessage.error('添加工作表失败，请刷新页面重试')
}
} catch (error) {
console.error('添加工作表失败:', error)
ElMessage.error('添加工作表失败: ' + (error instanceof Error ? error.message : '未知错误'))
}
}
// 获取数据
const getData = async () => {
console.log("1111111");
console.log('getData被调用')
console.log('luckysheetInstance:', luckysheetInstance)
console.log('window.luckysheet:', window.luckysheet)
// 检查是否有可用的Luckysheet实例
const availableInstance = luckysheetInstance || window.luckysheet
if (!availableInstance || typeof availableInstance.getAllSheets !== 'function') {
console.log('Luckysheet实例不可用，尝试重新初始化...')
// 等待Luckysheet加载
const isLoaded = await waitForLuckysheet()
if (!isLoaded) {
ElMessage.error('Luckysheet加载失败，请刷新页面重试')
return
}
// 尝试初始化
const initSuccess = await initLuckysheet()
if (initSuccess) {
// 等待初始化完成
setTimeout(() => {
getData()
}, 1500)
} else {
ElMessage.error('表格初始化失败，请刷新页面重试')
}
return
}
try {
// 使用可用的实例
const instance = availableInstance
// 获取所有工作表数据
const sheets = instance.getAllSheets()
console.log('所有工作表数据:', sheets)
// 获取当前工作表数据
const currentSheet = instance.getSheetData()
console.log('当前工作表数据:', currentSheet)
// 获取选中的单元格数据
const selectedRange = instance.getRangeByTxt()
console.log('选中的单元格范围:', selectedRange)
ElMessage.success('数据已获取，请查看控制台')
} catch (error) {
console.error('获取数据失败:', error)
ElMessage.error('获取数据失败')
}
}
// 打印工作表
const printSheet = () => {
const container = document.getElementById('luckysheet');
if (!container) {
window.print();
return;
}
// 获取内容实际高度和宽度
const grid = container.querySelector('.luckysheet-grid-container');
const contentHeight = grid ? grid.scrollHeight : container.scrollHeight;
const contentWidth = grid ? grid.scrollWidth : container.scrollWidth;
// 记录原始尺寸
const originalHeight = container.style.height;
const originalWidth = container.style.width;
// 设置为内容实际尺寸
container.style.height = contentHeight + 'px';
container.style.width = contentWidth + 'px';
// 等待渲染后打印
setTimeout(() => {
window.print();
// 恢复原始尺寸
container.style.height = originalHeight;
container.style.width = originalWidth;
}, 500);
};
// 组件挂载时初始化
onMounted(async () => {
console.log('组件挂载，开始初始化...')
console.log('window.luckysheet:', window.luckysheet)
// 等待Luckysheet加载完成
const isLoaded = await waitForLuckysheet()
if (isLoaded) {
console.log('Luckysheet已加载，开始初始化')
await initLuckysheet()
} else {
console.error('Luckysheet加载失败')
ElMessage.error('Luckysheet加载失败，请刷新页面重试')
}
})
// 组件卸载时清理
onUnmounted(() => {
if (luckysheetInstance) {
luckysheetInstance.destroy()
}
})
</script>
<style scoped lang="scss">
.luckysheet-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.toolbar {
padding: 16px;
background: #f5f5f5;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: flex-end;
gap: 12px;
flex-wrap: wrap;
}
.luckysheet-wrapper {
flex: 1;
min-height: 600px;
position: relative;
}
/* 确保Luckysheet容器有足够的高度 */
#luckysheet {
width: 100%;
height: 100%;
min-height: 600px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.toolbar {
padding: 12px;
gap: 8px;
}
.toolbar .el-button {
padding: 8px 12px;
font-size: 12px;
}
}
</style>
<style>
.luckysheet_info_detail div.luckysheet_info_detail_back{
display: none !important;
}
.luckysheet_info_detail_update,.luckysheet_info_detail_save{
display: none !important;
}
#luckysheet .luckysheet-share-logo,
.luckysheet .luckysheet-share-logo,
.luckysheet-share-logo{
background-image:url('@/assets/imgs/logo.png') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
width: 120px !important;
height: 40px !important;
}
@media print {
body * {
visibility: hidden;
}
#luckysheet,
#luckysheet * {
visibility: visible;
}
#luckysheet {
position: static !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
min-height: 100vh !important;
height: auto !important;
background: #fff !important;
overflow: visible !important;
box-sizing: border-box !important;
padding: 0 !important;
margin: 0 !important;
page-break-inside: avoid !important;
}
.toolbar {
display: none !important;
}
}
</style>
到此这篇关于vue3+luckysheet实现在线编辑Excel的项目实践的文章就介绍到这了,更多相关vue3 luckysheet 在线编辑Excel内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！