前言

后台项目，用的element-ui，有用户上传的资料图片，预览直接使用的el-image的preview-src-list，现在需求是在点击预览之后还能在预览界面进行图片的下载，而element-ui的el-image组件预览没提供下载功能，只能自己写一个了。

效果图

自定义组件 cus-image

1. 创建 cusImage.vue 自定义组件
2. 代码 props 属性 原汁原味儿 除了 lazy 和 scroll-container z-index 没写，其它的都写了，只是改成了 cus-image

   <template>
     <div class="cus-image" :style="width + ';' + height">
       <el-image
           style="width: 100%; height: 100%"
           :src="src"
           :fit="fit"
           :alt="alt"
           :referrerPolicy="referrerPolicy"
           :zIndex="zIndex"
           :preview-src-list="previewSrcList"
           @click="cusPreviewImage"
       >
       </el-image>
       <span
           class="el-image-viewer__btn el-image-viewer__download"
           v-show="dnFlag"
           @click="dnImage"
       >
           <i class="el-icon-download"></i>
       </span>
     </div>
   </template>
   <script>
   export default {
       name: "cusImage",
       data() {
           return {
               dnFlag: false,
               wrapperElem: null,
               hidElClassNameLists: [
                   "el-image-viewer__mask",
                   "el-image-viewer__btn el-image-viewer__close",
                   "el-icon-close",
               ],
           };
       },
       props: {
           src: {
               type: String,
               default: "",
           },
           previewSrcList: {
               type: Array,
               default: function () {
                   return [];
               },
           },
           width: {
               type: String,
               default: "100%",
           },
           height: {
               type: String,
               default: "100%",
           },
           fit: {
               type: String,
               default: "",
           },
           alt: {
               type: String,
               default: "",
           },
           referrerPolicy: {
               type: String,
               default: "",
           },
           zIndex: {
               type: Number,
               default: 2000,
           },
       },
   	methods: {
           cusPreviewImage() {
               this.dnFlag = true;
               this.checkElemlents();
           },
           checkElemlents() {
               this.$nextTick(() => {
                   let wrapper = document.getElementsByClassName(
                       "el-image-viewer__wrapper"
                   );
                   if (wrapper.length > 0) {
                       this.wrapperElem = wrapper[0];
                       this.cusClickHandler();
                   } else {
                       this.checkElemlents();
                   }
               });
           },
           cusClickHandler() {
               this.wrapperElem.addEventListener("click", this.hideCusBtn);
           },
           hideCusBtn(e) {
               let className = e.target.className;
               if (this.hidElClassNameLists.includes(className)) {
                   this.dnFlag = false;
               }
           },
           dnImage() {
               let imgUrl = document.getElementsByClassName(
                   "el-image-viewer__canvas"
               )[0].children[0].src;
               this.downloadImage(imgUrl);
           },
           // 下载图片，这里如果涉及到跨域需自行解决，我们设置的 CORS，文章最下方有跨域 NGINX 解决办法
           downloadImage(imgUrl) {
               let tmpArr = imgUrl.split("/");
               let fileName = tmpArr[tmpArr.length - 1];
               window.URL = window.URL || window.webkitURL;
               var xhr = new XMLHttpRequest();
               xhr.open("get", imgUrl, true);
               // 至关重要
               xhr.responseType = "blob";
               xhr.onload = function () {
                   if (this.status == 200) {
                       //得到一个blob对象
                       var blob = this.response;
                       var fileUrl = window.URL.createObjectURL(blob);
                       var a = document.createElement("a");
                       (document.body || document.documentElement).appendChild(a);
                       a.href = fileUrl;
                       if ("download" in a) {
                           a.download = fileName;
                       } else {
                           a.setAttribute("download", fileName);
                       }
                       a.target = "_self";
                       a.click();
                       a.remove();
                   }
               };
               xhr.send();
           },
       },
   };
   </script>
   <style scoped lang="less">
   .cus-image {
       display: inline-block;
       .el-image-viewer__download {
   	    top: 40px;
           right: 100px;
           width: 40px;
           height: 40px;
           font-size: 24px;
           color: #fff;
           background-color: #606266;
           z-index: 2001; /* 如果该组件需要传递 z-index 的值，这个值也需要做成动态的 props */
           cursor: pointer;
           position: fixed; 
       }
   }
   </style>
   

3. 调用

   <template>
       <div class="home">
           <div class="avatar">
             <cus-image
                 :src="path"
                 :preview-src-list="imgList"
             >
             </cus-image>
           </div>
       </div>
   </template>
   <script>
   	// @ is an alias to /src
   import cusImage from "@/components/cusImage.vue";
   
   export default {
       name: "Home",
       components: {
           cusImage,
       },
       data() {
           return {
               imgList: [
                   "https://www.***.com/upload_files/aaa.jpg",
                   "https://www.***.com/upload_files/image/2021/03/16/1615879665_832809.png",
                   "https://www.***.com/upload_files/bbb.png",
               ],
               path: "https://www.***.com/upload_files/aaa.jpg"
           };
       },
   };
   </script>
   <style lang="less">
   .avatar{
     width: 380px;
     height: 200px;
   }
   </style>
   

NGINX配置CORS实现跨域