更换贺报下载的方法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="downLoad"  @click="downLoadImagesFunc()" v-no-more-click="1000"> 下载 </button>
+      <button class="shareImg"  @click="fenxiang()" 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,85 +76,99 @@ 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, {
-        width: this.$refs.xingdownLoad.offsetWidth,
-        height: this.$refs.xingdownLoad.offsetHeight,
-        backgroundColor: '#fff',
-        scale: 2,
-        dpi: 300
-      }).then((canvas) => {
-        // 将 canvas 转换为 Blob
-        canvas.toBlob((blob) => {
-          this.blobToBase64(blob).then((base64String) => {
-            let base64Manane = base64String.split(',')[1]
-            // console.log(base64String)
-            EWebBridge.webCallAppInJs('bridge', {
-              flag: 'share',
-              extra: {
-                shareType: '1',
-                base64: base64Manane
-              }
+        html2canvas(this.$refs.xingdownLoad, {
+          width: this.$refs.xingdownLoad.offsetWidth,
+          height: this.$refs.xingdownLoad.offsetHeight,
+          backgroundColor: '#fff',
+          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(base64Manane);
+              EWebBridge.webCallAppInJs('bridge', {
+                flag: 'share',
+                extra: {
+                  shareType: '1',
+                  base64: base64Manane
+                }
+              })
             })
-          })
-          setTimeout(() => {
-            this.close();
-          }, 3000);
-        }, 'image/png')
-      })
+          }, 'image/png')
+        })
+        setTimeout(() => {
+          this.close()
+        }, 3000);
     },
     // 生成图片并下载
-    domToImage(domElement, quality, callback) {
-      // console.log(domElement);
-      html2canvas(domElement, {
-        width: domElement.offsetWidth,
-        height: domElement.offsetHeight,
-        backgroundColor: '#fff',
-        scale: 1,
-        dpi: 300
-      }).then((canvas) => {
-        // 转换canvas为PNG图片并压缩
-        canvas.toBlob(
-          (blob) => {
-            this.blobToBase64(blob).then((base64String) => {
-              base64Excel({ base64Img: base64String }).then(res => {
-                console.log(res);
-                window.localStorage.setItem('saveImg', res.path)
-                if (res.result == '0' && res.path != localStorage.getItem("saveImg")) {
-                  EWebBridge.webCallAppInJs('download', {
-                    name: '业绩贺报.png',
-                    url: res.path
-                  })
-                  .then(() => {
-                    console.log('下载完成')
-
-                  })
-                  .catch(() => {
-                    this.$toast.fail('图片下载失败，请重新下载！')
-                  })
-                }
-
-              })
-
-            })
-          },
-          'image/png'
-          // quality
-        )
-      })
-      setTimeout(() => {
-        this.close();
-      }, 3000);
+    domToImage() {
+      let domElement = this.$refs.xingdownLoad;
+      // 调用 captureAndProcessImage 函数
+      this.captureAndProcessImage(domElement);
+      return false
     },
-    downLoadImagesFunc() {
-      this.domToImage(this.$refs.xingdownLoad)
+    async  captureAndProcessImage(domElement) {
+      // try {
+      // 获取 DOM 元素
+        // 使用 html2canvas 捕获图像，并等待其完成
+        var canvas = await html2canvas(domElement, {
+            width: domElement.offsetWidth,
+            height: domElement.offsetHeight,
+            backgroundColor: '#fff',
+            scale: 1,
+            dpi: 300
+        });
+        console.log('下载',canvas);
+        // 将画布转换为 Blob，并等待其完成
+        const blob = await new Promise((resolve, reject) => {
+            canvas.toBlob(resolve, 'image/png');
+        });
+
+          var base64String = await  new Promise((resolve, reject) => {
+            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(() => {
+            console.log('下载完成')
+          }).catch(() => {
+            // this.$toast.fail('图片下载失败，请重新下载！')
+          })
+        }
+      // } catch (error) {
+      //     // 处理整个过程中的任何错误
+      //     console.error('Error capturing or processing the image:', error);
+      // }
     },
 
 
+
     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')
     },