ebiz-h5/src/views/ebiz/generateImg/generateImg.vue

<template>
  <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>
          <p class="name">{{ orderList.name }}</p>
        </div>
        <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' ? '承保时间：' : '预收时间：' }}
          <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" 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" />
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import { base64Excel } from '@/api/ebiz/nbs'
export default {
  name: 'generateImg',
  // generateImgData
  props: {
    // generateImgData: {
    //   type: Object,
    //   default: {}
    // },
  },
  data() {
    return {
      orderList: {},
      isIOS: false,
    }
  },
  created() {
    this.isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    if(this.isIOS) {
      document.getElementsByClassName('box').style.top = '38%'
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.orderList = JSON.parse(localStorage.getItem('orderList'))
      console.log('页面数据',this.orderList);
    },
    // 将 Blob转base64
    blobToBase64(blob) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onloadend = () => resolve(reader.result)
        reader.onerror = reject
        reader.readAsDataURL(blob)
      })
    },
    // 分享
    shareImg() {
      // const element = document.getElementById('capture')
      // const canvas = await html2canvas(element)
      html2canvas(this.$refs.generateImg, {
        width: this.$refs.generateImg.offsetWidth,
        height: this.$refs.generateImg.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
              }
            })
          })
        }, '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('图片下载失败，请重新下载！')
                    })
                }

              })

            })
          },
          'image/png'
          // quality
        )
      })
    },
    downLoadImagesFunc() {
      this.domToImage(this.$refs.generateImg)
    },
    close() {
      this.$emit('child-colse', '1')
    }
  }
}
</script>

<style lang="scss" scoped>
img {
  height: 100%;
  width: 100%;
  position: relative;
}

.box {
  position: absolute;
  width: 80%;
  height: 40%;
  top: 38%;
  left: 10%;

  .title {
    position: absolute;
    width: 100%;
    // left: 30%;
    top: 24%;
    font-weight: bold;

    p {
      display: flex;
      justify-content: center;
    }

    .organ {
      font-size: 12px;
      color: #333333;
    }

    .name {
      font-size: 17px;
      color: #333333;
    }
  }

  .pName {
    position: absolute;
    top: 44%;
    font-size: 15px;
    color: #B1170C;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-left: 5px;
  }

  .type {
    font-size: 22px;
    color: #B1170C;
    position: absolute;
    top: 53%;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .yuan {
    font-size: 30px;
    color: #B1170C;
    position: absolute;
    top: 67%;
    width: 100%;
    text-align: center;
    display: inline-block;
    vertical-align: bottom;

    span {
      font-size: 14px;
      margin-left: 5px;
    }
  }

  .time {
    font-size: 14px;
    color: #333333;
    position: absolute;
    top: 85%;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

.border-color {
  z-index: 9999;
  border: 2px solid;
  border-image: radial-gradient(circle, rgba(255, 233, 124, 1), rgba(222, 144, 34, 1)) 2 2;
}
/deep/ .van-button {
  border-radius: 12px;
  width: 42%;
}
/deep/ .van-button--danger {
  background: linear-gradient(to right, #f26e43, #ac0209) !important;
  /*设置按钮为渐变颜色*/
  border: none !important;
}
.close {
  position: fixed;
  top: 0;
  right: 0;
}
</style>