el-image改造，添加下载方法

项目中有个需求，图片预览的时候需要旋转并下载，市面上的插件并没有提供此方法，于是我便改造封装了一下。

组件

<template>
  <el-image
    :style="'width:' + width + '; height: ' + height"
    :src="src"
    :preview-src-list="imglist"
    :z-index="zIndex"
    :fit="fit"
    :alt="alt"
    :referrerPolicy="referrerPolicy"
    @click="clickimg"
  ></el-image>
</template>

 js部分

export default {
  name: "imageprint",
  data() {
    return {};
  },
  props: {
    src: {
      type: String,
      default: "",
    },
    imglist: {
      type: Array,
      default: function () {
        return [];
      },
    },
    width: {
      type: String,
      default: "100px",
    },
    height: {
      type: String,
      default: "100px",
    },
    fit: {
      type: String,
      default: "",
    },
    alt: {
      type: String,
      default: "",
    },
    referrerPolicy: {
      type: String,
      default: "",
    },
    zIndex: {
      type: Number,
      default: 3000,
    },
  },
  methods: {
    clickimg() {
      this.$nextTick(() => {
        let wrapper = document.getElementsByClassName(
          "el-image-viewer__actions__inner"
        );
        let p = document.createElement("i");
        p.setAttribute("class", "el-icon-printer");
        wrapper[0].appendChild(p);
        if (wrapper.length > 0) {
          this.wrapperElem = wrapper[0];
          this.clickHandler();
        }
      });
    },
    clickHandler() {
      this.wrapperElem.addEventListener("click", this.printBtn);
    },
    printBtn(e) {
      let className = e.target.className;
      if (className === "el-icon-printer") {
        document.getElementsByClassName("el-image-viewer__canvas")[0].children[0].setAttribute("id", "printimg");
        this.printImage();
      }
    },
    printImage() {

			let iframe = document.createElement("iframe");
      let doc = null;
      iframe.setAttribute("style","position:absolute;width:0px;height:0px;left:-500px;top:-500px")
      document.body.appendChild(iframe);
      doc = iframe.contentWindow.document;
      let img = document.getElementById("printimg")
			let clnimg = img.cloneNode(true)

      doc.body.appendChild(clnimg);
      doc.close();
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      setTimeout(() => {
        document.body.removeChild(iframe);
      }, 1000);
    },
  },
};

引用

import imageprint from '@/components/imageprint'
 components: {imageprint}

<imageprint :src="tem.link" :imglist="imglist"></imageprint>