| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="utf-8">
- <link rel='stylesheet' href='lib/luckysheet/plugins/css/pluginsCss.css' />
- <link rel='stylesheet' href='lib/luckysheet/plugins/plugins.css' />
- <link rel='stylesheet' href='lib/luckysheet/css/luckysheet.css' />
- <link rel='stylesheet' href='lib/luckysheet/assets/iconfont/iconfont.css' />
- <script src="lib/luckysheet/plugins/js/plugin.js"></script>
- <script src="lib/luckysheet/luckysheet.umd.js"></script>
- <style>
- body, html {
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- overflow: hidden;
- }
- #luckysheet {
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- }
- </style>
- </head>
- <body>
- <div id="luckysheet"></div>
- <script>
- let isInitialized = false
-
- // 修复luckysheet公式数据
- function fixSheetDataFormulas(sheetData) {
- if (!sheetData || !Array.isArray(sheetData)) return sheetData
-
- return sheetData.map(sheet => {
- if (!sheet) return sheet
-
- // 修复celldata中的公式
- if (Array.isArray(sheet.celldata)) {
- sheet.celldata.forEach(cell => {
- if (cell && cell.v && cell.v.f) {
- let formula = cell.v.f
- let newFormula = formula
-
- // 将 _xleta.N 替换为 "N"
- if (formula.includes('_xleta.')) {
- newFormula = newFormula.replace(/_xleta\.([A-Za-z]+)/g, (match, variable) => {
- // 如果是单个字母,替换为字符串
- if (/^[A-Za-z]$/.test(variable)) {
- return `"${variable}"`
- }
- return variable
- })
- }
-
- // 修复百分比格式问题
- // 将百分比转换为数值,因为Excel中100%就是数值1
- const percentRegex = /(\d+)%/g
- const percentMatches = [...newFormula.matchAll(percentRegex)]
-
- if (percentMatches.length > 0) {
- percentMatches.forEach(match => {
- const fullMatch = match[0]
- const number = match[1]
- const percentValue = parseFloat(number) / 100
-
- // 将百分比转换为数值
- newFormula = newFormula.replace(fullMatch, percentValue.toString())
- })
- }
-
- if (newFormula !== formula) {
- cell.v.f = newFormula
- }
- }
- })
- }
-
- // 修复data数组中的公式
- if (Array.isArray(sheet.data)) {
- sheet.data.forEach(row => {
- if (Array.isArray(row)) {
- row.forEach(cell => {
- if (cell && cell.f) {
- let formula = cell.f
- let newFormula = formula
-
- // 将 _xleta.N 替换为 "N"
- if (formula.includes('_xleta.')) {
- newFormula = newFormula.replace(/_xleta\.([A-Za-z]+)/g, (match, variable) => {
- // 如果是单个字母,替换为字符串
- if (/^[A-Za-z]$/.test(variable)) {
- return `"${variable}"`
- }
- return variable
- })
- }
-
- // 修复百分比格式问题
- const percentRegex = /(\d+)%/g
- const percentMatches = [...newFormula.matchAll(percentRegex)]
-
- if (percentMatches.length > 0) {
- percentMatches.forEach(match => {
- const fullMatch = match[0]
- const number = match[1]
- const percentValue = parseFloat(number) / 100
-
- // 将百分比转换为数值
- newFormula = newFormula.replace(fullMatch, percentValue.toString())
- })
- }
-
- if (newFormula !== formula) {
- cell.f = newFormula
- }
- }
- })
- }
- })
- }
-
- return sheet
- })
- }
-
- window.addEventListener('message', function(event) {
- const { type, data, readonly } = event.data
-
- if (type === 'init' && !isInitialized) {
- luckysheet.create({
- container: 'luckysheet',
- lang: 'zh', // 设置中文语言,工具栏提示为中文
- // 控制顶部工具栏显示:
- // - readonly=true (查阅模式): showtoolbar=false 隐藏工具栏
- // - readonly=false (添加/编辑模式): showtoolbar=true 显示工具栏
- showtoolbar: !readonly,
- showinfobar: false,
- showsheetbar: true,
- // 控制是否允许增加行/列
- enableAddRow: !readonly,
- enableAddCol: !readonly,
- userInfo: false,
- // 状态栏设置(包含缩放控制):
- // - showstatisticBar: true 显示状态栏(包含缩放控制)
- showstatisticBar: true,
- // 控制编辑栏显示:
- // - readonly=true: sheetFormulaBar=false 隐藏编辑栏
- // - readonly=false: sheetFormulaBar=true 显示编辑栏
- sheetFormulaBar: !readonly,
- allowEdit: !readonly,
- // 启用缩放控制 - 优化配置
- showtoolbarConfig: {
- zoom: true, // 启用缩放控制,包括右下角的缩放组件
- },
- // 缩放比例配置
- zoomRatio: {
- default: 100, // 默认缩放比例
- max: 400, // 最大缩放比例
- min: 10 // 最小缩放比例
- },
- // 显示行号列标
- showRowBar: true,
- showColumnBar: true,
- // 单元格右键菜单
- cellRightClickConfig: {
- copy: true,
- paste: true,
- insertRow: !readonly,
- insertColumn: !readonly,
- deleteRow: !readonly,
- deleteColumn: !readonly,
- hideRow: !readonly,
- hideColumn: !readonly,
- rowHeight: !readonly,
- columnWidth: !readonly
- },
- data: data ? fixSheetDataFormulas(data) : [{ name: 'Sheet1', color: '', status: 1, order: 0, data: [[{ v: '' }]] }],
- hook: {}
- })
- isInitialized = true
- } else if (type === 'getData') {
- const data = luckysheet.getAllSheets()
- event.source.postMessage({ type: 'dataResult', data: data }, event.origin)
- } else if (type === 'setData') {
- luckysheet.destroy()
- isInitialized = false
- luckysheet.create({
- container: 'luckysheet',
- lang: 'zh',
- showtoolbar: !readonly,
- showinfobar: false,
- showsheetbar: true,
- enableAddRow: !readonly,
- enableAddCol: !readonly,
- userInfo: false,
- showstatisticBar: true,
- sheetFormulaBar: !readonly,
- allowEdit: !readonly,
- // 启用缩放控制 - 优化配置
- showtoolbarConfig: {
- zoom: true, // 启用缩放控制,包括右下角的缩放组件
- },
- // 缩放比例配置
- zoomRatio: {
- default: 100, // 默认缩放比例
- max: 400, // 最大缩放比例
- min: 10 // 最小缩放比例
- },
- // 显示行号列标
- showRowBar: true,
- showColumnBar: true,
- // 单元格右键菜单
- cellRightClickConfig: {
- copy: true,
- paste: true,
- insertRow: !readonly,
- insertColumn: !readonly,
- deleteRow: !readonly,
- deleteColumn: !readonly,
- hideRow: !readonly,
- hideColumn: !readonly,
- rowHeight: !readonly,
- columnWidth: !readonly
- },
- data: fixSheetDataFormulas(data),
- hook: {}
- })
- isInitialized = true
- }
- })
-
- // 通知父页面已准备好
- window.parent.postMessage({ type: 'ready' }, '*')
- </script>
- </body>
- </html>
|