excel 导出 图片位置异常问题

package.json

@@ -56,6 +56,7 @@
     "animate.css": "^4.1.1",
     "axios": "^1.7.9",
     "background@1.3.0": "link:vue-flow/background@1.3.0",
+    "big.js": "^6.2.2",
     "codemirror": "^5.65.18",
     "codemirror-editor-vue3": "^2.8.0",
     "core@1.37.1": "link:vue-flow/core@1.37.1",

pnpm-lock.yaml

@@ -56,6 +56,9 @@ importers:
       background@1.3.0:
         specifier: link:vue-flow/background@1.3.0
         version: link:vue-flow/background@1.3.0
+      big.js:
+        specifier: ^6.2.2
+        version: 6.2.2
       codemirror:
         specifier: ^5.65.18
         version: 5.65.18
@@ -2250,6 +2253,9 @@ packages:
   big.js@5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
 
+  big.js@6.2.2:
+    resolution: {integrity: sha512-y/ie+Faknx7sZA5MfGA2xKlu0GDv8RWrXGsmlteyJQ2lvoKv9GBK/fpRMc2qlSoBAgNxrixICFCBefIq8WCQpQ==}
+
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -8045,6 +8051,8 @@ snapshots:
 
   big.js@5.2.2: {}
 
+  big.js@6.2.2: {}
+
   binary-extensions@2.3.0: {}
 
   binary@0.3.0:

src/components/ExcelView/export.js

@@ -1,5 +1,7 @@
 // import { createCellPos } from './translateNumToLetter'
 import Excel from "exceljs";
+
+import Big from 'big.js';
 import FileSaver from "file-saver";
 function exportExcel(luckysheet, name, excelType) {
   // 1.创建工作簿，可以为工作簿添加属性
@@ -467,7 +469,7 @@ var setStyleAndValue = function (cellArr, worksheet) {
 }*/
 
 //获取图片在单元格的位置
-var getImagePosition = function (num, arr) {
+/*var getImagePosition = function (num, arr) {
   let index = 0;
   let minIndex;
   let maxIndex;
@@ -493,45 +495,96 @@ var getImagePosition = function (num, arr) {
   let max = arr[maxIndex];
   let radio = Math.abs((num - min) / (max - min)) + index;
   return radio;
-};
+};*/
+var getImagePosition = function (num, arr) {
+  for (let i = 0; i < arr.length; i++) {
+    const item = arr[i]
+    if (num < item) {
+      const cell = i > 0 ? arr[i] - arr[i - 1]:item
+      // 偏移量单位为Emu,所以单元格的宽高需要转换为Emu的单位，cellWidth = cellWidth*10000
+      const cellInEmu = cell * 10000
+      const rowOrCol = i > 0 ? (num - arr[i - 1]) / (arr[i] - arr[i - 1]) + i:num/item
+      const native = Math.floor(rowOrCol)
+      const nativeOff = parseInt(new Big(rowOrCol).minus(native).toNumber() * cellInEmu)
+      return { rowOrCol, native, nativeOff }
+    }
+  }
+}
 /**
  * 设置图片
  * @param images
  * @param worksheet
  * @param workbook
  */
+/*var setImages = function (table, worksheet, workbook) {
+  let {
+    images,
+    visibledatacolumn,//所有行的位置
+    visibledatarow //所有列的位置
+  } = {...table}
+  if (typeof images != 'object') return;
+  for (let key in images) {
+    // 通过 base64  将图像添加到工作簿
+    const myBase64Image = images[key].src;
+    //开始行 开始列 结束行 结束列
+    const item = images[key];
+    const imageId = workbook.addImage({
+      base64: myBase64Image,
+      extension: 'png'
+    });
+
+    const col_st = getImagePosition(item.default.left,visibledatacolumn);
+    const row_st = getImagePosition(item.default.top,visibledatarow);
+
+    console.log(item.default.left,item.default.top,visibledatacolumn,visibledatarow)
+    console.log("1111111111111::" + col_st)
+    console.log("2222222222222::" + row_st)
+    //模式1，图片左侧与luckysheet位置一样，像素比例保持不变，但是，右侧位置可能与原图所在单元格不一致
+    worksheet.addImage(imageId, {
+      tl: { col: col_st, row: row_st},
+      ext: { width: item.default.width, height: item.default.height },
+    });
+    //模式2,图片四个角位置没有变动，但是图片像素比例可能和原图不一样
+    // const w_ed = item.default.left+item.default.width;
+    // const h_ed = item.default.top+item.default.height;
+    // const col_ed = getImagePosition(w_ed,visibledatacolumn);
+    // const row_ed = getImagePosition(h_ed,visibledatarow);
+    // worksheet.addImage(imageId, {
+    //   tl: { col: col_st, row: row_st},
+    //   br: { col: col_ed, row: row_ed},
+    // });
+  }
+};*/
+
 var setImages = function (table, worksheet, workbook) {
   let {
     images,
-    visibledatacolumn, //所有行的位置
-    visibledatarow, //所有列的位置
-  } = { ...table };
-  if (typeof images != "object") return;
+    visibledatacolumn,//所有行的位置
+    visibledatarow //所有列的位置
+  } = { ...table }
+  if (typeof images != 'object') return;
   for (let key in images) {
-    // console.log(images[key]);
-    // "data:image/png;base64,iVBORw0KG..."
     // 通过 base64  将图像添加到工作簿
     const myBase64Image = images[key].src;
-    //位置
-    const col_st = getImagePosition(
-      images[key].default.left,
-      visibledatacolumn
-    );
-    const row_st = getImagePosition(images[key].default.top, visibledatarow);
-    /*const tl = {col: images[key].default.left / 72, row: images[key].default.top / 19}*/
-    const tl = { col: col_st, row: row_st };
-    // 大小
-    const ext = {
-      width: images[key].default.width,
-      height: images[key].default.height,
-    };
+    //开始行 开始列 结束行 结束列
+    const item = images[key];
     const imageId = workbook.addImage({
       base64: myBase64Image,
-      //extension: 'png',
+      extension: 'png'
     });
+
+    // 只有设置tl、br的图片可以被luckysheet识别并展示，设置ext宽高的不行
+    const col_st = getImagePosition(item.default.left, visibledatacolumn);
+    const row_st = getImagePosition(item.default.top, visibledatarow);
+    const w_ed = item.default.left + item.default.width;
+    const h_ed = item.default.top + item.default.height;
+    const col_ed = getImagePosition(w_ed, visibledatacolumn);
+    const row_ed = getImagePosition(h_ed, visibledatarow);
+    // 需要设置nativeCol,nativeColOff,nativeRow,nativeRowOff,可以省略col,row
     worksheet.addImage(imageId, {
-      tl: tl,
-      ext: ext,
+      tl: { nativeCol: col_st.native, nativeColOff: col_st.nativeOff, nativeRow: row_st.native, nativeRowOff: row_st.nativeOff },
+      br: { nativeCol: col_ed.native, nativeColOff: col_ed.nativeOff, nativeRow: row_ed.native, nativeRowOff: row_ed.nativeOff },
+      editAs: 'oneCell',
     });
   }
 };

src/views/base/apply/excelDataBbox.vue

@@ -322,13 +322,15 @@ watch(
 );
 
 onMounted(() => {
-  setTimeout(() => {
-    let blobPromese = excelViewRef.value.toGetExcelBlob();
-    blobPromese.then((res) => {
-      console.log("=========", res);
-      uploadExcelBlob(res, props.data.id);
-    });
-  }, 1000);
+  if(props.data.state === '3'){
+    setTimeout(() => {
+      let blobPromese = excelViewRef.value.toGetExcelBlob();
+      blobPromese.then((res) => {
+        console.log("=========", res);
+        uploadExcelBlob(res, props.data.id);
+      });
+    }, 1000);
+  }
 });
 </script>
 <style lang="scss" scoped>