实现下载图片功能
不废话,直接上代码
快速上手 🚀
在新窗口下载
<el-card>
<div slot="header">
<span>卡片名称</span>
<!-- 按钮 -->
<el-button @click="download" style="flat:right;padding: 3px 0;" type="text">下载发票</el-button>
</div>
<!-- 图片 -->
<div><img :src="imgUrl" alt="" ref="imgRef" style="width: 400px;" /></div>
</el-card>
<script>
import img from 'xxx.jpg'
export default {
data() {
return {
imgUrl: img,
}
},
methods:{
/* 实现点击下载功能方法 */
download() {
// 新窗口打开
let url = this.$refs.imgRef
console.log(url.src)
// 启动Window方法
window.location.href = url.src
},
}
}
</script>
在当前窗口下载
<!-- 以当前窗口方法下载 -->
<el-card>
<div slot="header">
<span>卡片名称</span>
<!-- 按钮 -->
<el-button @click="down" style="flat:right;padding: 3px 0;" type="text">下载本地发票</el-button>
</div>
<!-- 图片 -->
<div><img :src="imgUrl" alt="" style="width: 400px;" /></div>
</el-card>
<script>
import img from 'xxx.jpg'
export default {
data() {
return {
imgUrl: img,
}
},
methods:{
/* 实现点击当前窗口下载功能方法 */
down() {
/* 先创建a标签 */
let alink = document.createElement('a')
/* 然后给了当前这个图片 */
alink.href = this.imgUrl
console.log(this.imgUrl)
/* 实现下载 名字图片为pic 图片名*/
alink.download = 'pic'
/* 下载啦 */
alink.click()
},
}
}
</script>
下载不同源发票
<!-- 下载不同源发票 -->
<el-card>
<div slot="header">
<span>卡片名称</span>
<!-- 按钮 -->
<el-button @click="downs" style="flat:right;padding: 3px 0;" type="text">下载不同源发票</el-button>
</div>
<!-- 图片 -->
<div><img src="../../assets/logo.png" alt="" ref="myimgRef" style="width: 400px;" /></div>
</el-card>
// 下载不同源发票
downloadIamge(imgsrc, name) {
// 下载图片地址和图片名
var image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function() {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
var context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
var url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
var a = document.createElement('a') // 生成一个a元素
var event = new MouseEvent('click') // 创建一个单击事件
a.download = name || 'photo' // 设置图片名称
a.href = url // 将生成的URL设置为a.href属性
a.dispatchEvent(event) // 触发a的单击事件
}
image.src = imgSrc
},
/* 点击调用上方封装方法 */
downs() {
this.downloadIamge(this.$refs.myimgRef.src, 'pic')
},