前端 下载图片功能实现
在写前端项目时，遇到这个问题，以为很简单，但是还是耽误挺长时间的，现记录一下。
前端下载图片有2中方式
一、a标签的download属性
该方法只支持同源图片下载，对于非同源图片只能打开。
二、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配置文件，支持跨域即可。