文檔參考：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
此處兩種方法便是使用data:URL (base64格式) 和 blob:URL (文件流格式)實現(xiàn)跨域下載
data: URL方式：
downloadByData (url) {
let image = new Image() //創(chuàng)建圖片對象
image.setAttribute('crossOrigin', 'anonymous') //設(shè)置允許跨域
image.src = url //賦值src
image.onload = () => {
//等待圖片加載完成創(chuàng)建canvas
let canvas = document.createElement('canvas')
//將圖片繪制到canvas畫布上
canvas.width = image.width
canvas.height = image.height
let ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
//獲取圖片文件格式 jpg/jpeg/png
let ext = image.src.substring(image.src.lastIndexOf('.')+1).toLowerCase()
//導(dǎo)出畫布快照 此時已越過跨域限制成功取到圖片數(shù)據(jù)
let dataURL = canvas.toDataURL('image/' + ext)
//創(chuàng)建a標(biāo)簽
const a = document.createElement("a");
// 賦值a標(biāo)簽download屬性值玫锋，標(biāo)明該a標(biāo)簽提供下載功能撩鹿，同時該屬性指定了下載時的文件名稱
a.download = this.downloadName;
//賦值a標(biāo)簽下載地址，即canvas導(dǎo)出的畫布快照 base64格式的圖片地址
a.href = dataURL;
//添加a標(biāo)簽到dom中
document.body.appendChild(a);
//觸發(fā)a標(biāo)簽點擊事件 觸發(fā)下載
a.click();
//下載完成 刪除多余的a標(biāo)簽 保持頁面原有元素不動
document.removeChild(a);
}
},
blob: URL方式：
downloadByBlob (url) {
let image = new Image() //創(chuàng)建圖片對象
image.setAttribute('crossOrigin', 'anonymous') //設(shè)置允許跨域
image.src = url //賦值src
image.onload = () => {
//等待圖片加載完成創(chuàng)建canvas
let canvas = document.createElement('canvas')
//將圖片繪制到canvas畫布上
canvas.width = image.width
canvas.height = image.height
let ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
//此處同樣是利用canvas自帶API將畫布數(shù)據(jù)導(dǎo)出為bolb流格式
canvas.toBlob((blob) => {
let url = URL.createObjectURL(blob)
const a = document.createElement("a");
a.download = this.downloadName;
// 直接將canvas導(dǎo)出的bolb:URL 格式賦值為a標(biāo)簽的href屬性 同樣進(jìn)行點擊觸發(fā)下載
a.href = url;
document.body.appendChild(a);
a.click();
document.removeChild(a);
// 釋放URL對象
URL.revokeObjectURL(url)
})
}
},
