vue项目里面实现js下载图片,而不是打开图片

原文地址:js如何实现点击下载图片 -

原文是html+js实现的,然后我的项目使用vue做的,我就看着改造了一番,因为a标签的download属性一直是打开页面而不是下载,差了半天说是域名不相同)

先看效果图:


vue项目里面实现js下载图片,而不是打开图片_第1张图片
效果图

来来,看代码

html部分


html部分

methods部分


vue项目里面实现js下载图片,而不是打开图片_第2张图片
methods

代码粘贴


createIframe(imgSrc) {

 if (document.getElementById('IframeReportImg').length === 0){

                    body.html('')

                }

                if(document.getElementById('IframeReportImg').attr("src") != imgSrc){

                    document.getElementById('IframeReportImg').attr("src")

                }else{

                    this.downloadImg()

                }

            },

            downloadImg() {

                if (document.getElementById('IframeReportImg').src != "about:blank") {

                    window.frames["IframeReportImg"].document.execCommand("SaveAs");

                }

            },

            download(imgSrc,num){

                this. createIframe(imgSrc)

            }

你可能感兴趣的:(vue项目里面实现js下载图片,而不是打开图片)