实现下载图片功能

不废话，直接上代码

快速上手 🚀

在新窗口下载

<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')
},