首先在项目中untils中增加一个工具函数,downloadPng.js
function downloadIamge(imgsrc, name) {
// 下载图片地址和图片名
var image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function() {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
const url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
const a = document.createElement('a') // 生成一个a元素
const event = new MouseEvent('click') // 创建一个单击事件
a.download = name || 'photo' // 设置图片名称
a.href = url // 将生成的URL设置为a.href属性
a.dispatchEvent(event) // 触发a的单击事件
}
image.src = imgsrc
}
export default downloadIamge
然后在页面中直接引入,点击下载的时候直接调用该方法
<template>
<div>
<el-button round class="btn" @click="handleDownload(item)">下载</el-button>
</div>
</template>
<script>
import downloadIamge from '@utils/downloadPng'
export default {
methods: {
// 下载
handleDownload(item) {
// downloadIamge(图片地址, 图片名称)
downloadIamge(item.download_info.url, item.download_info.filename)
}
},
}
</script>