网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

前端处理二进制流数据--转下载

前端处理二进制流数据--转下载


导言

​ 因业务需要,实现分类导出功能。筛选导出一定条件的数据,后端处理成Excle数据流,前端实现导出下载。

站在用户的角度思考问题,与客户深入沟通,找到彰武网站设计与彰武网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、网站制作、成都外贸网站建设、企业官网、英文网站、手机端网站、网站推广、国际域名空间、网络空间、企业邮箱。业务覆盖彰武地区。

实现
方法一

​ 将条件格式化成key=value&...文本格式,接到标签url接口之后,每当点击导出按钮的时候,创建一个标签,写入接口地址+传入数据,JS点击。最后移除标签。

代码如下:

//导出按钮点击事件
$('#export').click(function(){
    
    //获取查询条件value
    //构造键值对
    var paramData = {key1:value1,key2:value2,key3:value3,key4:value4};
    //这里利用了jQuery的内置方法,将其转换成key=value&...文本格式
    paramData = jQuery.param(paramData);
    //创建一个新的标签
    var a = document.createElement('a');
    //匹配接口+数据
    a.href = '/ba/baRecord/exportExcel?'+paramData;
    //点击
    a.click();
    //此时,实际应用中,已经跳转下载
    //移除标签
    a.remove();
});
方法二

​ 使用原生JS创建POST请求,传入数据,将得到的数据流用Blob(Binary Large Objects)处理。这个方法本人实现无果,欢迎指导。

代码如下

//导出按钮点击事件
$('#export').click(function(){
    //获取查询条件value
    //构造键值对
    var paramData = {key1:value1,key2:value2,key3:value3,key4:value4};
    //利用jQuery的内置方法,将其转换成key=value&...文本格式
    paramData = jQuery.param(paramData);
    /*
    	解释:
    		这里使用key=value&...文本格式是因为在后端处理传入数据时,需要文本格式。
    		另一个查询接口亦使用同一个数据接收类,同样传入此类型文本格式,因此延用。
    */
	//创建请求
    let xhr = new XMLHttpRequest();
    //规定请求类型,接口,是否同步
    xhr.open('post','/ba/baRecord/exportExcel',true);
    //规定响应类型为blob  !important
    xhr.responseType = 'blob';
	//发送请求数据
    xhr.send(paramData);
	//请求完成
    xhr.onload  = function (){
    	//当请求状态码为200时
        if(this.status === 200){
			//用blob对象接收返回的二进制数据
            let blob = new Blob([this.response])
            //创建标签
            let a = document.createElement('a')
            //此时blob暂存在内存中,传入url
            a.href = URL.createObjectURL(blob);
            //规定下载
            a.setAttribute("download", "data.xls");
            //点击
            a.click();
            //释放
            URL.revokeObjectURL(a.href);
        }
    }
});  
/*
	这个方法,后端接收不到传入数据,因此每次点击事件时总是导出全部数据。
	若传入数据就是js对象格式时,亦然。
	若传入数据是json格式时,
	paramData = JSON.stringify(paramData);
	亦然。
	望指导。
*/
方法三

​ 使用原生jQuery创建POST请求,传入数据,将得到的数据流用Blob(Binary Large Objects)处理。这个方法本人实现亦无果。

//导出按钮点击事件
$('#export').click(function(){
    
    //获取查询条件value
    //构造键值对
    var paramData = {key1:value1,key2:value2,key3:value3,key4:value4};
    $.ajax({
        type: "POST",
        url: '/ba/baRecord/exportExcel',
        /*
        	jQuery内置会判断传入数据类型,当我们未定义content-type时,默认使用string格式,
        	如果传入的paramData不是string格式,会调用jQuery.param()方法,将其格式化。
        */
        data: paramData,
        //预设响应数据为binary
        dataType: 'binary',
        //规定响应类型为blob  !important
        xhrFields: { responseType: "blob" },
        success: function (res) {
            // res 为二进制流
			//用blob对象接收返回的二进制数据
            let blob = new Blob([res])
            //创建标签
            let a = document.createElement('a')
            //此时blob暂存在内存中,传入url
            a.href = URL.createObjectURL(blob);
            //规定下载
            a.setAttribute("download", "data.xls");
            //点击
            a.click();
            //释放
            URL.revokeObjectURL(a.href);
        }
    });
});

/*
	这个方法后台能接收到数据,请求状态码200,浏览器响应结果预览为乱码。但是不会转到下载,即未进行	到success方法。
	测试
	complete: function (XMLHttpRequest, status) {
        console.log(XMLHttpRequest, status);
    }
    返回error
    无果
*/

//遂使用
statusCode: {
    200:function (res) {
        let blob = new Blob([res])
        let a = document.createElement('a')
        a.href = URL.createObjectURL(blob);
        a.setAttribute("download", "data.xls");
        a.click();
        URL.revokeObjectURL(a.href);
    }
}
/*
	亦无果,望指导
*/

网站栏目:前端处理二进制流数据--转下载
文章转载:
http://bjjierui.cn/article/dsojpeg.html

其他资讯