vue table列表点击按钮下载图片

//页面
<el-table-column label="图片下载" align="center">
    <template scope="scope">
        <div style="position: relative;width: 120px;">
            <img style="width: 100%" :src="scope.row.imgPath" alt=""/>
            <p @click="downloadImg(scope.row)" style="cursor: default;background: rgba(0,0,0,0.5);color: #FFFFFF;position: absolute;bottom: 0;width: 100%;text-align: center;"><img src="@/assets/videoImg/download.png" alt="" style="vertical-align: middle">下载</p>
         </div>
     </template>
</el-table-column>

//图片下载的方法
downloadImg(row) {
    let imgsrc= row.imgPath;
    let x = new XMLHttpRequest()
    x.open('GET', imgsrc, true)
    x.responseType = 'blob'
    x.onload = function () {
    let url = window.URL.createObjectURL(x.response)
    let a = document.createElement('a')
    a.href = url
    a.download = row.imgName;
    a.click()
    document.body.removeChild(a) // 下载完成移除元素
    window.URL.revokeObjectURL(url) // 释放掉blob对象
    }
    x.send()
},