统计查询

ZZJ

2022-06-15 4f7f16803ab5ed7b8a8a0dc087792d9b2fcefe2b

 src/views/search/components/imgDown.vue

@@ -1,97 +1,98 @@
<template>
    <div class="imgBox">
        <img 
          :src="'/httpImage/'+url" 
          class="cursor-pointer"
          v-if="isPreview"
          preview
        />
        <img 
          :src="'/httpImage/'+url" 
          v-if="!isPreview"
        />
        <el-button class="btn" @click="downloadIamge('/httpImage/'+url)">
          <i class="iconfont iconxiazai"></i>
        </el-button>
    </div>
  <div class="imgBox">
    <img
      :src="'http://' + url"
      class="cursor-pointer"
      v-if="isPreview"
      preview
    />
    <img :src="'http://' + url" v-if="!isPreview" />
    <el-button class="btn" @click="downloadIamge('http://' + url)">
      <i class="iconfont iconxiazai"></i>
    </el-button>
  </div>
</template>
<script>
import axios from "axios"
import axios from "axios";
export default {
   props:{
      url: {
          default: "",
          type: String
      },
      isPreview: {
        default: true,
        type: Boolean
      }
   },
   methods:{
  props: {
    url: {
      default: "",
      type: String,
    },
    isPreview: {
      default: true,
      type: Boolean,
    },
  },
  methods: {
    downloadIamge(url) {
      this.$notify.info({
          title: '消息',
          message: '资源下载中,请稍后...'
        });
        title: "消息",
        message: "资源下载中,请稍后...",
      });
      axios({
        method: "get",
        url: url,
        responseType: 'blob'
      }).then(res => {
        if (res.status == 200) {
          var a = document.createElement('a')
          var strs = url.split('/')
          var href = new Blob([res.data],{type: 'image/jpeg'})
          a.href = URL.createObjectURL(href);
          a.download  = strs[strs.length - 1]+'.jpg'
          a.click()
        }
      }).catch(err => {
        this.$notify({
          type: "error",
          message: "下载失败，"+err+"请重试！",
        })
        responseType: "blob",
      })
        .then((res) => {
          if (res.status == 200) {
            var a = document.createElement("a");
            var strs = url.split("/");
            var href = new Blob([res.data], { type: "image/jpeg" });
            a.href = URL.createObjectURL(href);
            a.download = strs[strs.length - 1] + ".jpg";
            a.click();
          }
        })
        .catch((err) => {
          this.$notify({
            type: "error",
            message: "下载失败，" + err + "请重试！",
          });
        });
    },
   } 
   
}
  },
};
</script>
<style lang="scss" scoped>
.imgBox{
.imgBox {
  width: 100%;
  height: 100%;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    position: relative;
    img {
        width: 100%;
        height: 100%;
        object-fit: contain
    object-fit: contain;
  }
  .btn {
    width: 30px;
    height: 30px;
    position: absolute;
    padding: 0;
    right: 20%;
    opacity: 1;
    bottom: 10px;
    -webkit-animation: fadenum 0.7s ease;
    display: none;
    i {
      font-size: 20px;
    }
    .btn {
        width: 30px;
        height: 30px;
        position: absolute;
        padding: 0;
        right: 20%;
        opacity: 1;
        bottom: 10px;
        -webkit-animation: fadenum 0.7s ease;
        display: none;
        i {
          font-size: 20px
        }
    }
  }
}
.imgBox:hover .btn {
  display: inline;
}
@-webkit-keyframes fadenum{ /*设置内容由显示变为隐藏*/
@-webkit-keyframes fadenum {
  /*设置内容由显示变为隐藏*/

    0%{opacity: 0;}
  0% {
    opacity: 0;
  }

    100%{opacity: 1;}

  100% {
    opacity: 1;
  }
}

</style>