之前完成過一個需求：“JavaScript 實現(xiàn)導出網(wǎng)頁中的一個模塊為一張圖片”。
當時是通過 canvas 實現(xiàn)的，導出圖片的效果也非常好，是我們客戶在舉辦線下會議時做廣告機的廣告圖用的。一張廣告圖可能很好做，美工手動完成一下也不費勁，但如果廣告圖里的數(shù)據(jù)全部來自數(shù)據(jù)庫，圖片也存在網(wǎng)絡上呢？（我要解決的就是這個問題，根據(jù)動態(tài)數(shù)據(jù)實現(xiàn)網(wǎng)頁自動排版并導出圖片）
進入正題：
今天同樣是在做一個圖片下載功能，其實代碼很少，
let eleA = document.createElement('a')
eleA.
eleA.download = "test.jpg"
eleA.click()
就是創(chuàng)建一個 a 標簽，然后設置 href 屬性，然后設置 download 屬性，最后點擊。
可惜，最后效果不如愿，因為在谷歌瀏覽器里，它老師新開一個頁面，直接預覽圖片。我需要做的是下載到本地，并保存成我設置的名字。
解決方案重點來了
let resp = await fetch( "https://test.com/test.jpg").catch(e => {
console.error(e)
})
if (!resp) {
return
}
let eleA = document.createElement('a')
let blob = await resp.blob().catch(e => {
console.log(e)
})
if(!blob) {
return
}
eleA.href = URL.createObjectURL(blob)
eleA.download = "test.jpg"
eleA.click()
步驟基本不變，變化的地方在于 href 屬性的設置，這里是先通過 fetch 下載數(shù)據(jù)到本地，然后使用 URL.createObjectURL(blob) 作為 href 屬性的值。
URL.createObjectURL() 靜態(tài)方法會創(chuàng)建一個 DOMString，其中包含一個表示參數(shù)中給出的對象的URL。這個 URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象。
新的代碼，可以實現(xiàn)下載圖片但不自動預覽圖片了，完事。
**PS：最開始說的那個需求里，實際上已經(jīng)做到了不自動預覽圖片，但那里的圖片源是來自 canvas，和這里的圖片鏈接不大一樣。
