luckysheet.html 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel='stylesheet' href='lib/luckysheet/plugins/css/pluginsCss.css' />
  6. <link rel='stylesheet' href='lib/luckysheet/plugins/plugins.css' />
  7. <link rel='stylesheet' href='lib/luckysheet/css/luckysheet.css' />
  8. <link rel='stylesheet' href='lib/luckysheet/assets/iconfont/iconfont.css' />
  9. <script src="lib/luckysheet/plugins/js/plugin.js"></script>
  10. <script src="lib/luckysheet/luckysheet.umd.js"></script>
  11. <style>
  12. body, html {
  13. margin: 0;
  14. padding: 0;
  15. width: 100%;
  16. height: 100%;
  17. overflow: hidden;
  18. }
  19. #luckysheet {
  20. margin: 0;
  21. padding: 0;
  22. width: 100%;
  23. height: 100%;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div id="luckysheet"></div>
  29. <script>
  30. let isInitialized = false
  31. // 修复luckysheet公式数据
  32. function fixSheetDataFormulas(sheetData) {
  33. if (!sheetData || !Array.isArray(sheetData)) return sheetData
  34. return sheetData.map(sheet => {
  35. if (!sheet) return sheet
  36. // 修复celldata中的公式
  37. if (Array.isArray(sheet.celldata)) {
  38. sheet.celldata.forEach(cell => {
  39. if (cell && cell.v && cell.v.f) {
  40. let formula = cell.v.f
  41. let newFormula = formula
  42. // 将 _xleta.N 替换为 "N"
  43. if (formula.includes('_xleta.')) {
  44. newFormula = newFormula.replace(/_xleta\.([A-Za-z]+)/g, (match, variable) => {
  45. // 如果是单个字母,替换为字符串
  46. if (/^[A-Za-z]$/.test(variable)) {
  47. return `"${variable}"`
  48. }
  49. return variable
  50. })
  51. }
  52. // 修复百分比格式问题
  53. // 将百分比转换为数值,因为Excel中100%就是数值1
  54. const percentRegex = /(\d+)%/g
  55. const percentMatches = [...newFormula.matchAll(percentRegex)]
  56. if (percentMatches.length > 0) {
  57. percentMatches.forEach(match => {
  58. const fullMatch = match[0]
  59. const number = match[1]
  60. const percentValue = parseFloat(number) / 100
  61. // 将百分比转换为数值
  62. newFormula = newFormula.replace(fullMatch, percentValue.toString())
  63. })
  64. }
  65. if (newFormula !== formula) {
  66. cell.v.f = newFormula
  67. }
  68. }
  69. })
  70. }
  71. // 修复data数组中的公式
  72. if (Array.isArray(sheet.data)) {
  73. sheet.data.forEach(row => {
  74. if (Array.isArray(row)) {
  75. row.forEach(cell => {
  76. if (cell && cell.f) {
  77. let formula = cell.f
  78. let newFormula = formula
  79. // 将 _xleta.N 替换为 "N"
  80. if (formula.includes('_xleta.')) {
  81. newFormula = newFormula.replace(/_xleta\.([A-Za-z]+)/g, (match, variable) => {
  82. // 如果是单个字母,替换为字符串
  83. if (/^[A-Za-z]$/.test(variable)) {
  84. return `"${variable}"`
  85. }
  86. return variable
  87. })
  88. }
  89. // 修复百分比格式问题
  90. const percentRegex = /(\d+)%/g
  91. const percentMatches = [...newFormula.matchAll(percentRegex)]
  92. if (percentMatches.length > 0) {
  93. percentMatches.forEach(match => {
  94. const fullMatch = match[0]
  95. const number = match[1]
  96. const percentValue = parseFloat(number) / 100
  97. // 将百分比转换为数值
  98. newFormula = newFormula.replace(fullMatch, percentValue.toString())
  99. })
  100. }
  101. if (newFormula !== formula) {
  102. cell.f = newFormula
  103. }
  104. }
  105. })
  106. }
  107. })
  108. }
  109. return sheet
  110. })
  111. }
  112. window.addEventListener('message', function(event) {
  113. const { type, data, readonly } = event.data
  114. if (type === 'init' && !isInitialized) {
  115. luckysheet.create({
  116. container: 'luckysheet',
  117. lang: 'zh', // 设置中文语言,工具栏提示为中文
  118. // 控制顶部工具栏显示:
  119. // - readonly=true (查阅模式): showtoolbar=false 隐藏工具栏
  120. // - readonly=false (添加/编辑模式): showtoolbar=true 显示工具栏
  121. showtoolbar: !readonly,
  122. showinfobar: false,
  123. showsheetbar: true,
  124. // 控制是否允许增加行/列
  125. enableAddRow: !readonly,
  126. enableAddCol: !readonly,
  127. userInfo: false,
  128. // 状态栏设置(包含缩放控制):
  129. // - showstatisticBar: true 显示状态栏(包含缩放控制)
  130. showstatisticBar: true,
  131. // 控制编辑栏显示:
  132. // - readonly=true: sheetFormulaBar=false 隐藏编辑栏
  133. // - readonly=false: sheetFormulaBar=true 显示编辑栏
  134. sheetFormulaBar: !readonly,
  135. allowEdit: !readonly,
  136. // 启用缩放控制 - 优化配置
  137. showtoolbarConfig: {
  138. zoom: true, // 启用缩放控制,包括右下角的缩放组件
  139. },
  140. // 缩放比例配置
  141. zoomRatio: {
  142. default: 100, // 默认缩放比例
  143. max: 400, // 最大缩放比例
  144. min: 10 // 最小缩放比例
  145. },
  146. // 显示行号列标
  147. showRowBar: true,
  148. showColumnBar: true,
  149. // 单元格右键菜单
  150. cellRightClickConfig: {
  151. copy: true,
  152. paste: true,
  153. insertRow: !readonly,
  154. insertColumn: !readonly,
  155. deleteRow: !readonly,
  156. deleteColumn: !readonly,
  157. hideRow: !readonly,
  158. hideColumn: !readonly,
  159. rowHeight: !readonly,
  160. columnWidth: !readonly
  161. },
  162. data: data ? fixSheetDataFormulas(data) : [{ name: 'Sheet1', color: '', status: 1, order: 0, data: [[{ v: '' }]] }],
  163. hook: {}
  164. })
  165. isInitialized = true
  166. } else if (type === 'getData') {
  167. const data = luckysheet.getAllSheets()
  168. event.source.postMessage({ type: 'dataResult', data: data }, event.origin)
  169. } else if (type === 'setData') {
  170. luckysheet.destroy()
  171. isInitialized = false
  172. luckysheet.create({
  173. container: 'luckysheet',
  174. lang: 'zh',
  175. showtoolbar: !readonly,
  176. showinfobar: false,
  177. showsheetbar: true,
  178. enableAddRow: !readonly,
  179. enableAddCol: !readonly,
  180. userInfo: false,
  181. showstatisticBar: true,
  182. sheetFormulaBar: !readonly,
  183. allowEdit: !readonly,
  184. // 启用缩放控制 - 优化配置
  185. showtoolbarConfig: {
  186. zoom: true, // 启用缩放控制,包括右下角的缩放组件
  187. },
  188. // 缩放比例配置
  189. zoomRatio: {
  190. default: 100, // 默认缩放比例
  191. max: 400, // 最大缩放比例
  192. min: 10 // 最小缩放比例
  193. },
  194. // 显示行号列标
  195. showRowBar: true,
  196. showColumnBar: true,
  197. // 单元格右键菜单
  198. cellRightClickConfig: {
  199. copy: true,
  200. paste: true,
  201. insertRow: !readonly,
  202. insertColumn: !readonly,
  203. deleteRow: !readonly,
  204. deleteColumn: !readonly,
  205. hideRow: !readonly,
  206. hideColumn: !readonly,
  207. rowHeight: !readonly,
  208. columnWidth: !readonly
  209. },
  210. data: fixSheetDataFormulas(data),
  211. hook: {}
  212. })
  213. isInitialized = true
  214. }
  215. })
  216. // 通知父页面已准备好
  217. window.parent.postMessage({ type: 'ready' }, '*')
  218. </script>
  219. </body>
  220. </html>