效果图奉上：
在这里插入图片描述
引入的依赖：

 "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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/news/912753.shtml
繁体地址，请注明出处：http://hk.pswp.cn/news/912753.shtml
英文地址，请注明出处：http://en.pswp.cn/news/912753.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux下MinIO分布式安装部署

Linux下MinIO分布式安装部署

文章目录 一、MinIO简单说明二、MinIO分布式安装部署1、关闭SELINUX2、开启防火墙2.1、关闭firewall&#xff1a;2.2、安装iptables防火墙 3、安装MinIO4、添加MinIO集群控制脚本4.1添加启动脚本4.2添加关闭脚本 5、MinIO控制台使用 一、MinIO简单说明 1、MinIO是一个轻量的对…
阅读更多...
Codeforces Round 980 (Div. 2)

Codeforces Round 980 (Div. 2)

ABC 略 D 这个过程一定是由1向后跳的过程中穿插有几次向前一步一步走。直到跳到一个位置后再把前面所有没有走过的位置倒序走一遍。总分就等于最大位置的前缀和-前面所有起跳位置和。前缀和固定我们只需要求到每个位置的最小起跳和即可。对于这个向后跳和向前走的过程我们可以…
阅读更多...
Langchain实现rag功能

Langchain实现rag功能

RAG&#xff08;检索增强生成&#xff09;的核心是通过外部知识库增强大模型回答的准确性和针对性&#xff0c;其工作流程与优化策略如下&#xff1a; 一、RAG 核心流程 ‌知识库构建‌ ‌文档加载与分割‌&#xff1a;将非结构化文档&#xff08;PDF、Markdown等&#xff09;…
阅读更多...
算法笔记上机训练实战指南刷题

算法笔记上机训练实战指南刷题

算法笔记上机训练实战指南刷题记录 文章目录 算法笔记上机训练实战指南刷题记录模拟B1001 害死人不偿命的(3n1)猜想B1011 AB 和 CB1016 部分ABB1026 程序运行时间B1046划拳B1008数组元素循环右移问题B1012 数字分类B1018 锤子剪刀布A1042 Shuffling Machine 每天两题&#xff0…
阅读更多...
MYSQL基础内容

MYSQL基础内容

一、介绍 1.不用数据库&#xff1a;使用IO流对数据进行管理 2.使用数据库&#xff1a;使用SQL语句对开发的数据进行管理&#xff0c;能储存上亿条数据 3.MYSQL&#xff1a; 是流行的关系型数据库管理系统之一&#xff0c;将数据保存在不同的数据表中&#xff0c;通过表与表之…
阅读更多...
音视频会议服务搭建(设计方案)-01

音视频会议服务搭建(设计方案)-01

前言 最近在做音视频会议系统服务搭建的工作任务&#xff0c;因为内容过多&#xff0c;我会逐篇分享相关的设计方案、开发思路、编程语言、使用的组件集合等等。如果你也有大型音视频会议系统搭建架构的需求&#xff0c;希望这些可以对你有所帮助。 EchoMeet 音视频会议系统架构…
阅读更多...
刷leetcode hot100/准备机试--图

刷leetcode hot100/准备机试--图

图的基础知识【这部分建议使用acm模式】 图论理论基础 | 代码随想录 存储&#xff1a; 一般有邻接表【适合稀疏图】【数组 链表 】和邻接矩阵【适合稠密图】存储方式 注意邻接表 和 邻接矩阵的写法都要掌握&#xff01; 邻接矩阵 n个节点&#xff0c;申请n*n或者&#xf…
阅读更多...
无代码自动化测试工具介绍

无代码自动化测试工具介绍

无代码自动化测试工具允许用户无需编写代码即可创建和运行测试，通过拖拽式界面或录制回放等可视化界面进行操作。 这些工具利用图形用户界面和预定义命令来创建测试，使非编程人员也能进行自动化测试。 无代码自动化测试工具使团队能够： 使用直观的拖拽界面开发和执行自动化…
阅读更多...
python学习打卡day58

python学习打卡day58

DAY 58 经典时序预测模型2 知识点回顾&#xff1a; 时序建模的流程时序任务经典单变量数据集ARIMA&#xff08;p&#xff0c;d&#xff0c;q&#xff09;模型实战SARIMA摘要图的理解处理不平稳的2种差分 n阶差分---处理趋势季节性差分---处理季节性 建立一个ARIMA模型&#xf…
阅读更多...
分布式锁的实现方式：使用 Redisson 实现分布式锁（ Spring Boot ）

分布式锁的实现方式：使用 Redisson 实现分布式锁（ Spring Boot ）

Redisson提供了分布式和可扩展的Java数据结构&#xff0c;包括分布式锁的实现。 1. 添加依赖 在pom.xml中添加Redisson依赖&#xff1a; <dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-boot-starter</artifactId>…
阅读更多...
Web基础关键_004_CSS（二）

Web基础关键_004_CSS（二）

目 录 一、样式 1.行内样式 2.内部样式 3.外部样式 二、选择器优先级 1.非关系选择器 2.关系选择器 三、属性 四、盒子模型 五、元素 1.块级元素 2.行内元素 3.行内块级元素 4.元素类型转换 六、浮动 七、定位 1.静态定位 2.相对定位 3.绝对定位 4.固定定位 …
阅读更多...
数据使用权与所有权分离：能否诞生“数据租赁”市场

数据使用权与所有权分离：能否诞生“数据租赁”市场

——首席数据官高鹏律师数字经济团队创作&#xff0c;AI辅助 数据如矿藏&#xff0c;开采需“契约” 想象一座蕴藏着无尽资源的数字矿山&#xff1a;企业或个人拥有数据的“所有权”&#xff0c;如同手握矿脉的产权&#xff0c;但若无法高效挖掘其价值&#xff0c;矿石终将沉…
阅读更多...
【esp32s3】2 - 第一个组件

【esp32s3】2 - 第一个组件

下面的内容编写时间跨度有点大&#xff0c;乱了得一团&#xff0c;也没ai整理。食之无味&#xff0c;弃之可惜。 推荐笔记&#xff1a;ESP32 之 ESP-IDF 教学&#xff08;十八&#xff09;—— 组件配置&#xff08;KConfig&#xff09; 推荐笔记&#xff1a;Kconfig 拓展 乐鑫…
阅读更多...
【Java_EE】单例模式、阻塞队列、线程池、定时器

【Java_EE】单例模式、阻塞队列、线程池、定时器

目录 单例模式 饿汉模式<代码> 懒汉模式<代码> 阻塞队列 阻塞队列概念 阻塞队列解决的问题 阻塞队列工作原理 阻塞队列的优/缺点 优点 缺点 模拟实现阻塞队列<代码> 线程池 线程池概念 线程池解决的问题 线程池参数 四种拒绝策略 线程池工作…
阅读更多...
Redis初识第七期---ZSet的命令和应用场景

Redis初识第七期---ZSet的命令和应用场景

ZSet相较于Set来说&#xff0c;它又是有序的&#xff0c;这个有序指的就是我们通常意义上的有序了&#xff0c;ZSet内部中是按照升序来排序的。 排序规则&#xff1a;ZSet相较于Set来说&#xff0c;它内部引入了一个新的属性&#xff1a;分数&#xff08;Score&#xff09;&am…
阅读更多...
Wps开放平台v5升级v7上传实体文件踩坑（Java使用restTemplate）

Wps开放平台v5升级v7上传实体文件踩坑（Java使用restTemplate）

背景&#xff1a; 最近接到一个老项目需求&#xff0c;之前开发的WPS开放平台文件&#xff08;商密集成&#xff09;预览功能因为升级需要重新对接api&#xff0c;新的上传文件接口踩坑特意记录一下。 这里出问题的是第二步&#xff0c;请求文件上传信息 踩坑代码 调用后403 p…
阅读更多...
啥时候上RAG？啥时候上微调？丨实战笔记

啥时候上RAG？啥时候上微调？丨实战笔记

哈喽&#xff0c;大家好&#x1f44f; 我是阿星&#xff01; 现在很多AI科普文章都会提到微调&#xff0c;RAG。 但是没有实战的过的同学可能会问&#x1f914;—— 啥时候用RAG&#xff1f;啥时候用微调呢&#xff1f;有啥区别&#xff1f;不都是让模型增加知识面的吗&…
阅读更多...
RabbitMQ-基础篇

RabbitMQ-基础篇

前言&#xff1a; 今天开始学RabbitMQ,还是跟着黑马的课程。 今日所学&#xff1a; RabbitMQ介绍RabbitMQ入门Java客户端中的MQ 1.RabbitMQ介绍 1.1 什么是RabbitMQ RabbitMQ 是一个开源的消息代理软件&#xff08;消息队列中间件&#xff09;&#xff0c;实现了高级消息…
阅读更多...
docker-compose配置redis哨兵详细步骤和配置文件

docker-compose配置redis哨兵详细步骤和配置文件

docker-compose配置redis哨兵详细步骤和配置文件 目录结构调整 redis-cluster/ ├── config/ │ ├── master.conf # 主节点配置 │ ├── slave1.conf # 从节点1配置 │ ├── slave2.conf # 从节点2配置 │ ├── sentinel1.…
阅读更多...
多模态大语言模型arxiv论文略读（146）

多模态大语言模型arxiv论文略读（146）

Exploring Response Uncertainty in MLLMs: An Empirical Evaluation under Misleading Scenarios ➡️ 论文标题&#xff1a;Exploring Response Uncertainty in MLLMs: An Empirical Evaluation under Misleading Scenarios ➡️ 论文作者&#xff1a;Yunkai Dang, Mengxi G…
阅读更多...
最新文章

Copyright @ 2022~2023