js点击下载图片、下载文件

html代码

	<img id="img" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1817942452,3032982386&fm=26&gp=0.jpg"/>
	<span class="downImg" onclick="down()">下载图片</span>

js代码

	function down(){
		var imgUrl = document.getElementById("img").src;
		var xmlhttp; //同理也可以下载文件
			xmlhttp = new XMLHttpRequest();   //用于在后台与服务器交换数据
			xmlhttp.open("GET", imgUrl, true);   //语法  open(method,url,async)
			xmlhttp.responseType = "blob"; // 请求返回的数据类型
			xmlhttp.onload = function() { //处理返回的数据
				if (this.status == 200) {
					var blob = this.response;
					var a = document.createElement('a');
					a.href = window.URL.createObjectURL(blob); //图片地址
					a.download = 'down.jpg'; //下载时 图片命名    如果没有默认是下载的图片的路径
					document.body.appendChild(a);
					a.click();
					document.body.removeChild(a);
				}
			}
			xmlhttp.send();   //用于发送http请求
/*注释： 在调用此方法完成 之后不想让刷新时，可在调用方法之后写return false  例如：down();return false;(在方法中写入)*/
	}

如有问题请指教或忽略。

主要点击是下载文件而不是在浏览器中打开文件（当然这里目前只能下载服务器链接，意思是路径为本地文件路径则下载出错）

//download="xzwj" 添加此属性 值为下载名
<a href="这里是你要下载的文件路径，是放在服务器中的，不能是本地的文件" class="inputname" download="xzwj">a>

2021.5.20 新增的下载
要求：点击下载文件 重命名文件 下边第一种方法是使用a标签，

html 代码
"\"#\" class='layui-btn layui-btn-normal layui-btn-xs' οnclick=\"fileDown('" + 服务器地址 + "')\">下载";

①这种方式下载存在问题：不能重命名 需要重命名需要后端配合

function fileDown(url) {
//两种方式：url都为服务器地址（可以是服务器文件，也可以是服务器路径）

//① ctxPath + ‘…省略…/downloadFile.xlsx文件
window.open(url); //会打开新的窗口
/*新增： 如果需要使用window.open()设置为当前页面打开 /
/ *解：
window.open(’‘,’_self’).location.href=Path + ‘接口?id=’+ID+‘&type=’+clickhtml;
*/
//② ctxPath + '…省略…/downloadFile 直接就是服务器的路径
window.location.href = url //从弹出框下载，之后点击下载弹框会直接关闭（layer中的弹框）
};

②这种方式有误：a下载有限制 （10M的文件下载只有十几K） 此问题未解决

function fileDown(data,filename) {
// 创建隐藏的可下载链接
var eleLink = document.createElement(‘a’);
eleLink.download = filename;
eleLink.style.display = ‘none’;
// 字符内容转变成blob地址
var blob = new Blob([data]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
};
**③新增一种下载 方式 下载文件 get方法传参 可以重命名 **

function exportaXMLsun(xmlurl,name,type){ //xmlurl路径  name为下载的文件名 type为文件名的后缀
    PageLoading();
    if(!type){
        type='.xlsx';//默认文件
    }
    var xhr = new XMLHttpRequest();
    xhr.open('GET',xmlurl,true);
    xhr.setRequestHeader("Authorization", localStorage.getItem(token_key));//没有可以不用
    xhr.responseType = "blob";
    xhr.onload = function(){
        if(this.status === 200){
            var blob = this.response;
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onload = function(e){
                // var headerName = xhr.getResponseHeader("Content=Disposition");
                // var fileName = decodeURIComponent(headerName).substring(20);
                var a = document.createElement('a');
                a.download = name + type;
                a.href = e.target.result;
                $('body').append(a);
                a.click();
                $(a).remove();
            }
            RemoveLoading();
        }
    }
    xhr.send();
 }

**④下载文件 使用post 方式 传参 未找到重命名 **

post('下载路径',{'参数名':'值'})
function post(url, params) {
    // 创建form元素
    var temp_form = document.createElement("form");
    // 设置form属性
    temp_form.action = url;
    temp_form.target = "_self";
    temp_form.method = "post";
    temp_form.style.display = "none";
    // 处理需要传递的参数
    for (var x in params) {
        var opt = document.createElement("textarea");
        opt.name = x;
        opt.value = params[x];
        temp_form .appendChild(opt);
    }
    document.body.appendChild(temp_form);
    // 提交表单
    temp_form .submit();
}