a標籤的download屬性

a標籤加上downlaod屬性後，就可完成對href屬性連接文件的下載，但僅僅是限於同源文件，若是是非同源，download屬性會失效。

 

無download屬性的時候，a標籤的默認行爲是連接跳轉進行預覽，而針對瀏覽沒法預覽的文件，也可達到下載的效果。

 

怎麼解決下載非同源文件的問題？？ 例如image圖片

 

方法： 經過canvas繪製，生成臨時路徑 (

data協議路徑  // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"

)，這個路徑就是一個同源路徑，而後傳入下載函數進行下載。 

 

 1 let img = new Image();
 2 img.setAttribute('crossOrigin', 'anonymous')
 3 img.src = data.entry;
 4 img.onload = function(data) {
 5     let canvas = document.createElement('canvas');
 6     canvas.width = img.width;
 7     canvas.height = img.height;
 8     let context = canvas.getContext('2d');
 9     context.drawImage(img, 0, 0, canvas.width, canvas.height);
10     let url = canvas.toDataURL('image/png');
11     downLoadByLink(url,"小程序碼");
12 }

const downLoadByLink = (url, filename) =>{
    //若是提供filename，則filename須要包含擴展名
    var link,
        evt;
    
    link = document.createElement('a');
    link.href = url;
    filename && link.setAttribute('download', filename);
    if(document.fireEvent) {
        window.open(link.href);
    }else {
        evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, true);
        link.dispatchEvent(evt);
    }
};