javascript，vue實作圖檔下載下傳到本地

原生js中：

<img src="./boy.png" class="img1"></img>
<input type="button" value="下載下傳" onclick="down('img1')">
           

function down(selector, name) {  
        // 生成一個a元素
        var a = document.createElement('a')
        // 将a的download屬性設定為我們想要下載下傳的圖檔名稱
        a.download = name || 'pic'
        // 将生成的URL設定為a.href屬性
        a.href = './boy.png'
        // 觸發a的單擊事件
        a.click();
}
           

注意⚠️：圖檔和html檔案要是同源，不然會失效。

vue中：

<div>
	<img src="../../../img/logo.png" alt="">
	<p @click="downs">下 載</p>
</div>
           

data{
    imgs:require("../../../img/logo.png")
}
           

methods:{
    downs() {
      //必須同源才能下載下傳
      var alink = document.createElement("a");
      alink.href = this.imgs;
      alink.download = "pic"; //圖檔名
      alink.click();
    }

}
           

注意⚠️：圖檔和html檔案要是同源，不然會失效。

附上：a标簽使用方法詳解