element-ui 手动添加图片预览功能，下载功能

因为element的image组件在文档里面只有默认的预览模式，所以在网上查了一下，发现还有一个组件，不过是需要单独引用的，这就很nice，话不多说，以下正文

预览图片

首先在需要用到预览图片的页面引入一下代码
ps：因为不是直接展示的缩略图，用的是上传组件，所以点击图片名称的时候需要知道当前点击的图片是第几张，然后预览图片列表顺序就得改变了

<!-- 这里我是用的上传之后可以预览图片，不是用image组件展示的 -->
<el-upload disabled :file-list="tzfj_file_list" :on-preview="handlePreview" action=""></el-upload>
<!-- 图片预览和下载 -->
<el-image-viewer v-if="showViewer" :on-close="()=>{showViewer=false}" :url-list="viewerImgList" :file-list="fileList" />
<script>
	export default {
		components: {
			'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
		},
	},
	data() {
		// 预览图片列表
        imgList: [],
        // 处理过的预览图片列表
        viewerImgList: [],
        // 下载图片列表
        fileList: [],
        // 预览图片弹窗
        showViewer: false,
	},
	methods: {
	  // 点击下载 预览
	  handlePreview(file){
		this.imgList = []
		this.fileList = []
		this.tzfj_file_list.forEach(item => {
		  //这是排除掉pdf文件，这个莫得办法，后面是单独用iframe预览的，他自带有下载功能
          if (item.file_url.indexOf('.pdf') == -1) {
            //这个是纯图片预览
            this.imgList.push(item.file_url)
            //这里是用来下载的，单纯只是图片可下载不了
            this.fileList.push(item)
          }
        })
        //定义当前点击的是哪张图片
        var nindex = 0
        this.imgList.forEach((item,index) =>{
          if (item == file.file_url) {
            nindex = index
          }
        })
        let tempImgList = [...this.imgList];
        let temp = [];
        //点击当前图片的时候把图片数组顺序换一下，点击的第一张图片在前面，以此类推
        for (let i = 0; i < nindex; i++) {
          temp.push(tempImgList.shift());
        }
        //这里最终输出预览列表
        this.viewerImgList = tempImgList.concat(temp);
	  }
	}
</script>

这时候点击图片已经可以预览了，顺序也不会错，点哪张看哪张，下面就是修改element的image组件源码，添加下载功能了，看看效果图

下载图片

源码位置：node_modules\element-ui\packages\image\src\image-viewer.vue

<!-- ACTIONS -->
<div class="el-image-viewer__btn el-image-viewer__actions">
  <div class="el-image-viewer__actions__inner">
    <i class="el-icon-zoom-out img-btn-icon" @click="handleActions('zoomOut')"></i>
    <i class="el-icon-zoom-in img-btn-icon" @click="handleActions('zoomIn')"></i>
    <i class="el-image-viewer__actions__divider"></i>
    <i :class="mode.icon" class="img-btn-icon" @click="toggleMode"></i>
    <i class="el-image-viewer__actions__divider"></i>
    <i class="el-icon-refresh-left img-btn-icon" @click="handleActions('anticlocelise')"></i>
    <i class="el-icon-refresh-right img-btn-icon" @click="handleActions('clocelise')"></i>
    //这里添加一个下载按钮
    <i class="el-icon-download img-btn-icon" v-if="fileList.length > 0" @click="handleActions('download')"></i>
  </div>
</div>

<!-- CANVAS -->
<div class="el-image-viewer__canvas">
  <img
    v-for="(url, i) in urlList"
    v-if="i === index"
    ref="img"
    class="el-image-viewer__img"
    :key="url"
    :src="currentImg"
    :style="imgStyle"
    // 获取当前是哪张图片
    @load="handleImgLoad($event,url)"
    @error="handleImgError"
    @mousedown="handleMouseDown">
</div>
<script>
  export default {
    props: {
      //接收下载列表
      fileList:{
      	type: Array,
      	default: () => []
      }
    },
    data(){
      return {
        //当前的图片链接
        nUrl:'',
      }
    },
    methods: {
      //获取当前的图片链接
      handleImgLoad(e,url) {
	    this.nUrl = url
	    this.loading = false;
	  },
	  //点击下载按钮事件
      handleActions(action, options = {}) {
        case 'download':
          this.fileList.forEach(item =>{
            if (this.nUrl == item.file_url) {
              let flieType = item.flie_type
              //开启loading
              const load = Loading.service({
                lock: true,
                text: '正在下载...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });
              drawing.downloadDrawing(item.id).then(res => {
                //关闭loading
                load.close();
                this.$message({
                  message: '下载成功',
                  type: 'success'
                })
                var blob = new Blob()
                if (flieType === 'pdf') {
                  blob = new Blob([res.data], {
                    type: `application/pdf` // word文档为msword,pdf文档为pdf
                  })
                } else {
                  blob = new Blob([res.data], {
                    type: `application/msword` // word文档为msword,pdf文档为pdf
                  })
                }
                if ('download' in document.createElement('a')) {
                  var downloadElement = document.createElement('a')
                  var href = window.URL.createObjectURL(blob) // 创建下载的链接
                  downloadElement.href = href
                  downloadElement.download = item.name
                  document.body.appendChild(downloadElement)
                  downloadElement.click() // 点击下载
                  document.body.removeChild(downloadElement) // 下载完成移除元素
                  window.URL.revokeObjectURL(href) // 释放掉blob对象
                } else {
                  // IE10+下载
                  navigator.msSaveBlob(blob, item.name)
                }
              })
            }
          })
          break;
      }
    }
  }
</script>

第一次写文章，有不足之处请多多指正，感谢！

修正

2023年9月20日
大家记得不要直接修改源码，最好是新建一个.vue文件，把源码复制过去，再修改。用的时候直接引入你新建的这个vue文件，或者在main.js里面全局引用也可以