temp

config/router.config.js

@@ -53,6 +53,10 @@ export default [
         path: '/mobile/detail/:templateId/:versionId',
         component: './Detail/Mobile',
       },
+      {
+        path: '/temp',
+        component: './Temp/Index',
+      },
 
       // {
       //   path: '/dd-login/:dingUserId',

src/pages/Temp/index.js

@@ -0,0 +1,99 @@
+import react, { useRef } from 'react';
+import LuckyExcel from 'luckyexcel';
+
+function Index() {
+  const sheetRef = useRef();
+  const luckysheetRef = useRef();
+  /**
+   * 导入excl
+   * @param {*} files input:file的evt.target.files
+   * @returns
+   */
+  const uploadExcel = files => {
+    if (files == null || files.length == 0) {
+      return;
+    }
+
+    let name = files[0].name;
+    let suffixArr = name.split('.'),
+      suffix = suffixArr[suffixArr.length - 1];
+    if (suffix != 'xlsx') {
+      message.error('只支持xlsx格式的文件!');
+      return;
+    }
+    LuckyExcel.transformExcelToLucky(files[0], (exportJson, luckysheetfile) => {
+      if (exportJson.sheets == null || exportJson.sheets.length == 0) {
+        message.error('读取xlsx文件失败!');
+        return;
+      }
+      // this.luckysheet.destroy();
+      // 同步当前文档内容
+      let cell = [];
+      exportJson.sheets.forEach(sheet => {
+        let titleCell = [];
+        sheet.celldata.forEach(item => {
+          if (item.r == 0) {
+            // 标题头
+            titleCell.push(item);
+          }
+          // 生成cid
+          item.v.cid = `${item.r}-${item.c}`;
+        });
+        let tempCell = titleCell.map(item => {
+          let value = '';
+          if (item.v?.v) {
+            value = item.v?.v;
+          } else if (item.v.ct?.s && item.v.ct?.s instanceof Array) {
+            value = item.v.ct.s.map(item => item?.v).join?.('');
+          }
+          return { sheet_name: sheet.name, col_idx: item.r, col_axis: item.c, col_value: value };
+        });
+        cell = [...cell, ...tempCell];
+      });
+      renderSheet(exportJson.sheets);
+    });
+  };
+
+  const handleLoad = () => {
+    let contentWindow = sheetRef.current.contentWindow;
+    luckysheetRef.current = contentWindow.luckysheet;
+  };
+
+  const renderSheet = currentData => {
+    const data = currentData;
+    let option = {
+      lang: 'zh',
+      showinfobar: false,
+      showstatisticBar: false,
+      data: JSON.parse(JSON.stringify(data)),
+      hook: {
+        cellMousedown: (cell, position, sheet) => {
+          console.log(cell, position, sheet);
+        },
+      },
+    };
+
+    luckysheetRef.current.destroy();
+    luckysheetRef.current.create(option);
+    setTimeout(() => {
+      luckysheetRef.current.setCellFormat(0, 0, 'bg', '#fff');
+    }, 500);
+  };
+
+  return (
+    <div>
+      <input type="file" onChange={e => uploadExcel(e.target.files)} />
+      <iframe
+        style={{
+          width: '100%',
+          height: '80vh',
+        }}
+        ref={sheetRef}
+        onLoad={handleLoad}
+        src="/luckysheet.html"
+      ></iframe>
+    </div>
+  );
+}
+
+export default Index;