更换贺报下载的方法30

src/views/ebiz/generateImg/generateImg.vue

@@ -16,8 +16,8 @@
     <div class="flex justify-content-s bottom-btn border-color">
       <!-- <van-button square type="default" :disabled="shareJin" size="large" @click="shareImg" v-no-more-click="1000"> 分享 </van-button> -->
       <!-- <van-button square type="danger" :disabled="downLoadJin" size="large" @click="downLoadImagesFunc" v-no-more-click="1000"> 下载 </van-button> --> 
-      <button class="shareImg"  @click="shareImg()" v-no-more-click="1000"> 分享 </button>
+      <button class="shareImg"  @click="fenxiang()" v-no-more-click="1000"> 分享 </button>
-      <button class="downLoad"  @click="downLoadImagesFunc()" v-no-more-click="1000"> 下载 </button>
+      <button class="downLoad"  @click="domToImage()" v-no-more-click="1000"> 下载 </button>
     </div>
     <div class="close" @click="close()">
       <van-icon name="cross" size="38" color="#fff" />
@@ -76,7 +76,10 @@ export default {
       })
     },
     // 分享
-    shareImg() {
+    fenxiang() {
+      if(this.$refs.xingdownLoad != this.$refs.xingdownLoad) {
+        return
+      }
       // const element = document.getElementById('capture')
       // const canvas = await html2canvas(element)
         html2canvas(this.$refs.xingdownLoad, {
@@ -86,11 +89,12 @@ export default {
           scale: 2,
           dpi: 300
         }).then((canvas) => {
+          console.log('分享');
           // 将 canvas 转换为 Blob
           canvas.toBlob((blob) => {
             this.blobToBase64(blob).then((base64String) => {
               let base64Manane = base64String.split(',')[1]
-            // console.log(base64String)
+              console.log(base64Manane);
               EWebBridge.webCallAppInJs('bridge', {
                 flag: 'share',
                 extra: {
@@ -99,62 +103,72 @@ export default {
                 }
               })
             })
-          setTimeout(() => {
-            this.close();
-          }, 3000);
           }, 'image/png')
         })
+        setTimeout(() => {
+          this.close()
+        }, 3000);
     },
     // 生成图片并下载
-    domToImage(domElement, quality, callback) {
+    domToImage() {
-      // console.log(domElement);
+      let domElement = this.$refs.xingdownLoad;
-      html2canvas(domElement, {
+      // 调用 captureAndProcessImage 函数
+      this.captureAndProcessImage(domElement);
+      return false
+    },
+    async  captureAndProcessImage(domElement) {
+      // try {
+      // 获取 DOM 元素
+        // 使用 html2canvas 捕获图像，并等待其完成
+        var canvas = await html2canvas(domElement, {
             width: domElement.offsetWidth,
             height: domElement.offsetHeight,
             backgroundColor: '#fff',
             scale: 1,
             dpi: 300
-      }).then((canvas) => {
+        });
-        // 转换canvas为PNG图片并压缩
+        console.log('下载',canvas);
-        canvas.toBlob(
+        // 将画布转换为 Blob，并等待其完成
-          (blob) => {
+        const blob = await new Promise((resolve, reject) => {
-            this.blobToBase64(blob).then((base64String) => {
+            canvas.toBlob(resolve, 'image/png');
-              base64Excel({ base64Img: base64String }).then(res => {
+        });
-                console.log(res);
+
-                window.localStorage.setItem('saveImg', res.path)
+          var base64String = await  new Promise((resolve, reject) => {
-                if (res.result == '0' && res.path != localStorage.getItem("saveImg")) {
+            const reader = new FileReader()
+            reader.onloadend = () => resolve(reader.result)
+            reader.onerror = reject
+            reader.readAsDataURL(blob)
+            console.log(4444);
+          })
+        // 调用 base64Excel 函数，并等待其完成
+        const res = await base64Excel({ base64Img: base64String });
+        
+        // 检查结果，并处理下载逻辑
+        if (res.result === '0') {
+          console.log(5555);
+          console.log(res.path);
+          console.log(EWebBridge);
           EWebBridge.webCallAppInJs('download', {
             name: '业绩贺报.png',
             url: res.path
-                  })
+          }).then(() => {
-                  .then(() => {
             console.log('下载完成')
-
+          }).catch(() => {
-                  })
+            // this.$toast.fail('图片下载失败，请重新下载！')
-                  .catch(() => {
-                    this.$toast.fail('图片下载失败，请重新下载！')
           })
         }
+      // } catch (error) {
+      //     // 处理整个过程中的任何错误
+      //     console.error('Error capturing or processing the image:', error);
+      // }
+    },
 
-              })
-
-            })
-          },
-          'image/png'
-          // quality
-        )
-      })
-      setTimeout(() => {
-        this.close();
-      }, 3000);
-    },
-    downLoadImagesFunc() {
-      this.domToImage(this.$refs.xingdownLoad)
-    },
 
 
     close() {
       console.log(15434678);
+      // document.documentElement.removeChild(this.$refs.xingdownLoad)
+      // this.$refs.xingdownLoad.removeChild(this.$refs.xingdownLoad);
       document.getElementById('capture').innerHTML = '';
       this.$emit('child-colse', '1')
     },