fix: 粘贴excel数据超过表格本身范围时报错

.gitignore

@@ -1,7 +1,6 @@
 .DS_Store
 node_modules
 /dist
-*.lock
 
 # local env files
 .env.local

src/utils/clipboard.ts

@@ -53,29 +53,20 @@ export const pasteCustomClipboardString = (text: string) => {
   return clipboardData
 }
 
-/**
+// 尝试解析剪贴板内容是否为Excel表格（或类似的）数据格式
- * 检查粘贴元素是否为外部exlc表格类型
+export const pasteExcelClipboardString = (text: string): string[][] | boolean => {
- * @param text 
+  const lines: string[] = text.split('\r\n')
- * @returns 
+
- */
+  if (lines[lines.length - 1] === '') lines.pop()
-export const exlcTesting = (text: string): string[][] | boolean => {
+
-  // 判定一下是不是exl格式
+  let colCount = -1
-  const lineList: string[] = text.split('\r\n')
+  const data: string[][] = []
-  // 按照\n拆分表格 最后会多出一个空字串
+  for (const index in lines) {
-  if (lineList[lineList.length - 1] === '') {
+    data[index] = lines[index].split('\t')
-    lineList.splice(length - 1, 1)
+
+    if (data[index].length === 1) return false
+    if (colCount === -1) colCount = data[index].length
+    else if (colCount !== data[index].length) return false
   }
-  let tNum = -1
+  return data
-  const exlc: string[][] = []
-  for (const index in lineList) {
-    exlc[index] = lineList[index].split('\t')
-    if (exlc[index].length === 1) return false
-    if (tNum === -1) {
-      tNum = exlc[index].length
-    }
-    else if (tNum !== exlc[index].length) {
-      return false
-    }
-  }
-  return exlc
 }

src/views/components/element/TableElement/CustomTextarea.vue

@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import { defineComponent, onUnmounted, ref, watch } from 'vue'
-import { pasteCustomClipboardString, exlcTesting } from '@/utils/clipboard'
+import { pasteCustomClipboardString, pasteExcelClipboardString } from '@/utils/clipboard'
 
 export default defineComponent({
   name: 'custom-textarea',
@@ -58,16 +58,16 @@ export default defineComponent({
 
         if (clipboardDataFirstItem && clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
           clipboardDataFirstItem.getAsString(text => {
-            // exlc数据格式解析
+            const clipboardData = pasteCustomClipboardString(text)
-            const exlc = exlcTesting(text)
+            if (typeof clipboardData === 'object') return
-            if (exlc) {
+ 
-              emit('updateExlc', exlc)
+            const excelData = pasteExcelClipboardString(text)
-              if (textareaRef.value) textareaRef.value.innerHTML = exlc[0][0]
+            if (excelData) {
+              emit('insertExcelData', excelData)
+              if (textareaRef.value) textareaRef.value.innerHTML = excelData[0][0]
               return
             }
 
-            const clipboardData = pasteCustomClipboardString(text)
-            if (typeof clipboardData === 'object') return
             emit('updateValue', text)
             document.execCommand('insertText', false, text)
           })

src/views/components/element/TableElement/EditableTable.vue

@@ -61,7 +61,7 @@
               contenteditable="plaintext-only"
               :value="cell.text"
               @updateValue="value => handleInput(value, rowIndex, colIndex)"
-              @updateExlc="exlc => handleExlcInput(exlc, rowIndex, colIndex)"
+              @insertExcelData="value => insertExcelData(value, rowIndex, colIndex)"
             />
             <div v-else class="cell-text" v-html="formatText(cell.text)" />
           </td>
@@ -510,12 +510,18 @@ export default defineComponent({
       emit('change', tableCells.value)
     }, 300, { trailing: true })
 
-    // 粘贴exlc数据时的更新方法
+    // 插入来自Excel的数据
-    const handleExlcInput = (exlc:string[][], rowIndex:number, colIndex:number) => {
+    const insertExcelData = (data: string[][], rowIndex: number, colIndex: number) => {
-      for (let i = 0; i < exlc.length; i++) {
+      let maxRow = data.length
-        for (let j = 0; j < exlc[i].length; j++) {
+      let maxCol = data[0].length
+
+      if (rowIndex + maxRow > tableCells.value.length) maxRow = tableCells.value.length - rowIndex
+      if (colIndex + maxCol > tableCells.value[0].length) maxCol = tableCells.value[0].length - colIndex
+
+      for (let i = 0; i < maxRow; i++) {
+        for (let j = 0; j < maxCol; j++) {
           if (tableCells.value[rowIndex + i][colIndex + j]) {
-            tableCells.value[rowIndex + i][colIndex + j].text = exlc[i][j]
+            tableCells.value[rowIndex + i][colIndex + j].text = data[i][j]
           }
         }
       }
@@ -642,7 +648,7 @@ export default defineComponent({
       handleMousedownColHandler,
       contextmenus,
       handleInput,
-      handleExlcInput,
+      insertExcelData,
       subThemeColor,
       formatText,
     }