js原生xhr处理文件下载问题

后端返回blob文件流
在这里插入图片描述

请求响应,获取文件名,需要后端支持
在这里插入图片描述
项目返回的filename是乱码的,不知道怎么解决

post 调用方法

function downLoadFile(url,params){
	var xhr = new XMLHttpRequest();
	xhr.open('POST', url, true);
	xhr.responseType = "blob";  // 返回类型blob
	xhr.onload = function () {
		if (xhr.status === 200) {
			const dispoition = xhr.getResponseHeader('Content-Disposition') || ''
			const nameStr = dispoition.split(';')[1] || ''
			const fileName = decodeURI(nameStr.split('=')[1] || '')
			console.log(fileName,'乱码')
			//decodeURI解码需要后端处理。文件类型固定可自定义名字
			const blob = xhr.response
			const a = document.createElement('a')
			a.href = URL.createObjectURL(blob)
			a.download = fileName  //a.download = '历史数据.xlsx'; // 成功
			a.click();
		}
		else {
			//请求失败处理
		}
	};
	// 发送ajax请求
	xhr.send(JSON.stringify(params))
}

get请求
调用方法 返回promise可自定义成功失败响应

function downLoadFile(url, params) {
    return new Promise((resolve, reject) => {
        let val = '';
        for(let key in params){
            val+='&'+key+'='+params[key]
        }
        if(val){
            //替换第一个
            val = val.replace(/&/,"?");
        }
        let xhr = new XMLHttpRequest();
        //api 这里用的是 apiconfig.devServer.proxy['/devURL8001A/*'].target; devURL8001A为代理地址
        xhr.open("get", api+url+val ); //url填写后台的接口地址,  
        xhr.setRequestHeader("token", getToken());
        xhr.responseType = "blob";
        xhr.onload = function () {
            if (xhr.status == 200) {
                const blob = xhr.response
                if (blob.type == 'application/vnd.ms-excel') {
                    // const dispoition = xhr.getResponseHeader('Content-Disposition') || ''
                    // const nameStr = dispoition.split(';')[1] || ''
                    // const fileName = decodeURI(nameStr.split('=')[1] || '')
                    const fileName = '历史抄表' //fileName 或能获取名称可用
                    if (window.navigator.msSaveOrOpenBlob) {
                        navigator.msSaveBlob(blob, fileName);
                    } else {
                        let a = document.createElement("a");
                        let blobUrl = createObjectURL(blob);
                        a.href = blobUrl;
                        a.download = fileName;
                        document.body.appendChild(a);
                        a.click();
                        window.URL.revokeObjectURL(blobUrl);
                        resolve(true)
                    }
                }
                else {
                	//失败时返回json
                    resolve(false);
                }
            }
        };
        xhr.send();
    })
    
}

可用window.location.href
缺点:无法对失败链接进行处理
处理参数

function downLoadFile(url,params){
	let val = '';
	for(let key in params){
		val+='&'+key+'='+params[key]
	}
	if(val){
		//替换第一个
		val = val.replace(/&/,"?");
	}
	window.location.href = url+val;
}
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值