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

最新推荐文章于 2024-07-13 11:45:14 发布

无她无乐

最新推荐文章于 2024-07-13 11:45:14 发布

阅读量315

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53248144/article/details/127851381

版权

项目要接入安防监控摄像头，还要捕捉抓图

找了一天一直没找到，最后在n多个里面自己写的，最后可以下载了，包括跨域的问题

//页面
<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()
},