JS保存文件到本地 or JS Saving File

[lanlin]

场景

比如 canvas 绘图数据的保存， 又或者有的时候需要 download 一个远程文件，而这个请求需要 header authorization 等情况。 这个时候我们往往只能拿到文件的二进制数据，因此需要保存到本地文件。

方法

特别提示：IE 10 以下等老掉牙的浏览器就不用考虑这个方法了，洗洗睡吧~

function(data, filename, mime)
 {
    var blob = new Blob([data], {type: mime || 'application/octet-stream'});

    if (typeof window.navigator.msSaveBlob !== 'undefined')
    {
        // IE workaround for "HTML7007: One or more blob URLs were 
        // revoked by closing the blob for which they were created. 
        // These URLs will no longer resolve as the data backing 
        // the URL has been freed."
        window.navigator.msSaveBlob(blob, filename);
    }
    else
    {
        var blobURL = window.URL.createObjectURL(blob);
        var tempLink = document.createElement('a');
        tempLink.style.display = 'none';
        tempLink.href = blobURL;
        tempLink.setAttribute('download', filename); 
        
        // Safari thinks _blank anchor are pop ups. We only want to set _blank
        // target if the browser does not support the HTML5 download attribute.
        // This allows you to download files in desktop safari if pop up blocking 
        // is enabled.
        if (typeof tempLink.download === 'undefined')
        {
            tempLink.setAttribute('target', '_blank');
        }
        
        document.body.appendChild(tempLink);
        tempLink.click();
        document.body.removeChild(tempLink);
        window.URL.revokeObjectURL(blobURL);
    }
}