很早之前就知道a標簽上加一個 download ，然后設置href 為文件的路徑
但是這個還是只是限于你的文件在你本服務器上，而且還是相對地址的，或者是本地資源的時候

而另一種情況就是。后端只是返回一個圖片的網絡地址 ，然后根據這個地址讓你去下載

但是再通過上面的那個方式 下載的時候，會發現 會變成預覽的情況，點擊就跳轉
這個時候參考一篇博客的想法

1. 將圖片url轉換成canvas

var url = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F15%2F20180715191146_WTQuT.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638442303&t=dd9f21b28649799e4e2ea709d9bbe811"
let image = new Image()
 image.setAttribute('crossOrigin', 'anonymous');
 image.src = url;
 image.onload = () => {
     var imgUrl = URL.createObjectURL(img);
     let canvas = document.createElement('canvas')
     canvas.width = image.width
     canvas.height = image.height
     let ctx = canvas.getContext('2d')
     ctx.drawImage(image, 0, 0, image.width, image.height)
 
 }

注意： 這里要講解個東西 就是這個玩意
image.setAttribute(‘crossOrigin’, ‘anonymous’);
允許你是用跨域來的圖片地址，如果不設置的話 會生成失敗
或者你設置個空也行。 image.setAttribute(‘crossOrigin’, '‘);

2. canvas對象轉換成blob對象

canvas.toBlob((blob) => {
   
})

3 使用URL 生成臨時的路徑地址

tempUrl = URL.createObjectURL(blob)

注意不用的時候記得釋放哦
URL.revokeObjectURL(url)

4. 使用a標簽進行下載

const download = (url) => {
     let a = document.createElement('a');
     a.download = "下載";
     a.href = url;
     a.click()
 }

我們看下效果哈

點擊確實有下載了，注意看左下角哈

關注我 持續更新 前端知識。