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

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

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

先看效果图：

效果图

来来，看代码

html部分

html部分

methods部分

methods

代码粘贴

createIframe(imgSrc) {

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

                    body.html('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="downloadImg();" width="0" height="0" src="about:blank"></iframe>')

                }

                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)

            }