vue3 + 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" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/plugins/plugins.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/css/luckysheet.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/assets/iconfont/iconfont.css" /><!-- 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 = 0const 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 HTMLInputElementconst file = target.files?.[0]if (!file) returnconsole.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.luckysheetresolve(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?.resultconsole.log('读取结果类型:', typeof result)if (!result) {reject(new Error('文件读取结果为空'))return}const data = new Uint8Array(result as ArrayBuffer)console.log('转换为Uint8Array，长度:', data.length)// 尝试不同的解析方式let workbooktry {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 = 1if (style.font.italic) cellData.v.it = 1if (style.font.size) cellData.v.fs = style.font.sizeif (style.font.color) {const color = style.font.colorif (color.rgb) {cellData.v.fc = '#' + color.rgb.substring(2)}}}// 背景色if (style.fill) {if (style.fill.fgColor) {const bgColor = style.fill.fgColorif (bgColor.rgb) {cellData.v.bg = '#' + bgColor.rgb.substring(2)}}}// 对齐方式if (style.alignment) {const alignment = style.alignmentif (alignment.horizontal) {switch (alignment.horizontal) {case 'left':cellData.v.ff = 0breakcase 'center':cellData.v.ff = 1breakcase 'right':cellData.v.ff = 2break}}if (alignment.vertical) {switch (alignment.vertical) {case 'top':cellData.v.vt = 0breakcase 'middle':cellData.v.vt = 1breakcase 'bottom':cellData.v.vt = 2break}}}// 边框if (style.border) {const border = style.borderif (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) * 100console.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.luckysheetif (!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)) + 1const maxCol = Math.max(...celldata.map((cell: any) => cell.c)) + 1console.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.lengthconst 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.luckysheetif (!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>