更换贺报下载的方法36

public/js/EWebBridge.js

@@ -152,7 +152,6 @@ function appCallBack() {}
 
   // 初始化App桥接环境
   function setupWebViewJavascriptBridge(callback) {
-    console.log(callback);
     // Android 调用
     if (window.WebViewJavascriptBridge) {
       callback(WebViewJavascriptBridge)
@@ -195,9 +194,6 @@ function appCallBack() {}
       setTimeout(function() {
         document.documentElement.removeChild(WVJBIframe)
       }, 0)
-      setTimeout(() => {
-        document.documentElement.removeChild(WVJBIframe)
-      }, 100);
     }
   }
 
@@ -240,15 +236,11 @@ function appCallBack() {}
 
   // 初始化SDK
   var EWebBridge = (window.EWebBridge = {
-    
     webCallAppInJs: function(method, params) {
       // params --> Mixed (json对象 {"a":"123","b":"200"} 或 null 或其他形式的参数，具体根据和app端的约定来)
       method = method || 'getUserToken'
       params = params || null
       return triggerCallHandler(method, params)
-    },
-    webCallAppInJs: function() {
-
     }
   })
 })(window)

src/views/ebiz/generateImg/generateImg.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="contents">
-    <div id="capture" ref="xingdownLoad" style="height: 100vh; overflow: hidden">
-      <img src="@/assets/images/list_img.png" crossorigin="anonymous" alt="" />
+  <div>
+    <div id="capture" ref="generateImg" style="height: 100vh; overflow: hidden">
+      <img src="@/assets/images/list_img.png" alt="" />
       <div class="box">
         <div class="title">
           <p class="organ">{{ orderList.manageComNameFull }}</p>
@@ -10,14 +10,15 @@
         <div class="pName">{{ orderList.productNameFull }}</div>
         <div class="type">{{ orderList.outOrderType == 'accept' ? '承保规保' : '预收规保' }}</div>
         <div class="yuan">{{ orderList.prem }}<span style="color: #333333">元</span></div>
-        <div class="time">{{ orderList.outOrderType == 'accept' ? '承保时间：' : '预收时间：' }}{{ orderList.appntDate }}</div>
+        <div class="time">{{ orderList.outOrderType == 'accept' ? '承保时间：' : '预收时间：' }}
+          <span v-if="orderList.outOrderType == 'accept'">{{ orderList.signDate }}</span>
+          <span v-if="orderList.outOrderType != 'accept'">{{ orderList.appntDate }}</span>
+        </div>
       </div>
     </div>
     <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="fenxiang()" v-no-more-click="1000"> 分享 </button>
-      <button class="downLoad"  @click="domToImage()" v-no-more-click="1000"> 下载 </button>
+      <van-button square type="default" size="large" @click="shareImg" v-no-more-click="1000"> 分享 </van-button>
+      <van-button square type="danger" size="large" @click="downLoadImagesFunc" v-no-more-click="1000"> 下载 </van-button>
     </div>
     <div class="close" @click="close()">
       <van-icon name="cross" size="38" color="#fff" />
@@ -27,7 +28,6 @@
 
 <script>
 import html2canvas from 'html2canvas'
-import { saveAs } from 'file-saver'
 import { base64Excel } from '@/api/ebiz/nbs'
 export default {
   name: 'generateImg',
@@ -42,13 +42,8 @@ export default {
     return {
       orderList: {},
       isIOS: false,
-      shareJin: false,
-      downLoadJin: false,
     }
   },
-  // beforeCreate() {
-  //   this.$refs.xingdownLoad.innerHTML = ''; // 清空内容
-  // },
   created() {
     this.isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
     if(this.isIOS) {
@@ -58,13 +53,10 @@ export default {
   mounted() {
     this.getList()
   },
-  beforeDestroy(){
-    this.$refs.xingdownLoad.innerHTML = ''; // 清空内容
-  },
   methods: {
     getList() {
       this.orderList = JSON.parse(localStorage.getItem('orderList'))
-      // console.log('页面数据',this.orderList);
+      console.log('页面数据',this.orderList);
     },
     // 将 Blob转base64
     blobToBase64(blob) {
@@ -76,32 +68,21 @@ export default {
       })
     },
     // 分享
-    fenxiang() {
+    shareImg() {
       // const element = document.getElementById('capture')
       // const canvas = await html2canvas(element)
-      var num = 0
-      html2canvas(this.$refs.xingdownLoad, {
-        width: this.$refs.xingdownLoad.offsetWidth,
-        height: this.$refs.xingdownLoad.offsetHeight,
+      html2canvas(this.$refs.generateImg, {
+        width: this.$refs.generateImg.offsetWidth,
+        height: this.$refs.generateImg.offsetHeight,
         backgroundColor: '#fff',
         scale: 2,
-        dpi: 300,
-        useCORS: true,
-        allowTaint: true,
+        dpi: 300
       }).then((canvas) => {
-        console.log('分享');
         // 将 canvas 转换为 Blob
         canvas.toBlob((blob) => {
           this.blobToBase64(blob).then((base64String) => {
-            if(localStorage.getItem("first")) {
-              if(num < 1) {
-                num++
-                return false
-              }
-            }
-            localStorage.setItem("first", true)
             let base64Manane = base64String.split(',')[1]
-            console.log(base64Manane);
+            // console.log(base64String)
             EWebBridge.webCallAppInJs('bridge', {
               flag: 'share',
               extra: {
@@ -114,82 +95,63 @@ export default {
       })
     },
     // 生成图片并下载
-    domToImage() {
-      let domElement = this.$refs.xingdownLoad;
-      // 调用 captureAndProcessImage 函数
-      this.captureAndProcessImage(domElement);
-      return false
-    },
-    async  captureAndProcessImage(domElement) {
-      try {
-      // 获取 DOM 元素
-      // let domElement = this.$refs.xingdownLoad;
-        // 使用 html2canvas 捕获图像，并等待其完成
-        var canvas = await html2canvas(domElement, {
-            width: domElement.offsetWidth,
-            height: domElement.offsetHeight,
-            backgroundColor: '#fff',
-            scale: 1,
-            dpi: 300,
-            useCORS: true,
-            allowTaint: true,
-        });
-        console.log('下载',canvas);
-        // 将画布转换为 Blob，并等待其完成
-        const blob = await new Promise((resolve, reject) => {
-            canvas.toBlob(resolve, 'image/png');
-        });
+    domToImage(domElement, quality, callback) {
+      console.log(location);
+      html2canvas(domElement, {
+        width: domElement.offsetWidth,
+        height: domElement.offsetHeight,
+        backgroundColor: '#fff',
+        scale: 1,
+        dpi: 300
+      }).then((canvas) => {
+        // 转换canvas为PNG图片并压缩
+        canvas.toBlob(
+          (blob) => {
+            // const a = document.createElement('a')
+            // a.href = URL.createObjectURL(blob)
+            // a.download = '业绩贺报.png'
+            // a.click()
+            // let newimg = new Image()
+            // newimg.src = URL.createObjectURL(blob)
+            // newimg.onload = function () {
+            //   URL.revokeObjectURL(newimg.src)
+            //   callback(newimg)
+            // }
+            this.blobToBase64(blob).then((base64String) => {
+              base64Excel({ base64Img: base64String }).then(res => {
+                if (res.result == '0') {
+                  EWebBridge.webCallAppInJs('download', {
+                    name: '业绩贺报.png',
+                    url: res.path
+                  })
+                    .then(() => {
+                      console.log('下载完成')
+                    })
+                    .catch(() => {
+                      this.$toast.fail('图片下载失败，请重新下载！')
+                    })
+                }
 
-          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 });
-        
-        // window.location.href = res.path
-        // 检查结果，并处理下载逻辑
-        if (res.result === '0') {
-          console.log(5555);
-          console.log(res.path + '?t=' + Date.now());
-          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);
-      }
+              })
+
+            })
+          },
+          'image/png'
+          // quality
+        )
+      })
+    },
+    downLoadImagesFunc() {
+      this.domToImage(this.$refs.generateImg)
     },
     close() {
-      console.log(15434678);
-      document.getElementById('capture').innerHTML = '';
       this.$emit('child-colse', '1')
-    },
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.contents {
-  width: 100%;
-  height: 100vh;
-  background-color: #fff;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
 img {
   height: 100%;
   width: 100%;
@@ -279,19 +241,13 @@ img {
   border: 2px solid;
   border-image: radial-gradient(circle, rgba(255, 233, 124, 1), rgba(222, 144, 34, 1)) 2 2;
 }
-.shareImg {
+/deep/ .van-button {
   border-radius: 12px;
-  width: 35%;
-  height: 50px;
-  border: none !important;
+  width: 42%;
 }
-.downLoad {
-  border-radius: 12px;
-  width: 35%;
-  height: 49px;
+/deep/ .van-button--danger {
   background: linear-gradient(to right, #f26e43, #ac0209) !important;
   /*设置按钮为渐变颜色*/
-  color: #fff;
   border: none !important;
 }
 .close {