前端 下載圖片功能實現

在寫前端項目時，遇到這個問題，以為很簡單，但是還是耽誤挺長時間的，現記錄一下。

前端下載圖片有2中方式

一、a標簽的download屬性

該方法只支持同源圖片下載，對於非同源圖片只能打開。

<a href="/images/myw3schoolimage.jpg" download="w3logo">

二、blob對象下載
非同源圖片下載可以使用該方法。

function downloadImg(){

        function download(blobUrl) {
            var a = document.getElementById('down_network_topology');
            a.download = '';
            a.href = blobUrl;
            // a.click();
            // document.body.removeChild(a);
        }
        var url = $("#down_network_topology").attr("down_url");
        var req = new XMLHttpRequest();
        req.open('get', url, true);
        req.responseType = 'blob';
        req.onload = function() {
            var data = req.response;
            // var blob = new Blob([data],{type: '.jpg,.png,.jpeg,.gif,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'});
            var blob = new Blob([data],{type: 'image/jpeg'});
            var blobUrl = window.URL.createObjectURL(blob);
            download(blobUrl) ;
        };
        req.send();
    }

使用該方法可能存在跨域問題，報錯如下：

需要修改nginx配置文件，支持跨域即可。