javascript-小技巧-动态form下载文件流

最新推荐文章于 2023-02-17 22:52:42 发布

zf18234031156

最新推荐文章于 2023-02-17 22:52:42 发布

阅读量550

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zf18234031156/article/details/114896180

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.问题描述

2.解决方式

1.问题描述

今天从服务端下载文件流时，点击按钮后无任何反应。想起ajax无法接收流内容。

2.解决方式

1.模拟动态表单获取流内容（表单post传递参数相对便利），代码如下

Request.downFile = function(url,paramsObj){
    url = Request.getUrl(url);
    let form = document.createElement('form');
    document.getElementsByTagName('body')[0].appendChild(form);
    form.setAttribute('style','display:none');
    form.setAttribute('target','');
    form.setAttribute('method','post');
    form.setAttribute('action',url);
    let inputContent = document.createElement('input');
    inputContent.setAttribute('type','hidden');
    inputContent.setAttribute('name',Config.TokenName);
    inputContent.setAttribute('value',AuthContext.getToken());
    form.append(inputContent);
    if(paramsObj){
        for(let key  in paramsObj){
            let input = document.createElement('input');
            input.setAttribute('type','hidden');
            input.setAttribute('name',key);
            input.setAttribute('value',paramsObj[key]);
            form.append(input);
        }
    }
    form.submit();
    form.remove();
};

2.将接口url和请求参数传入方法即可，如下

exportUsers() {
    Request.downFile("/api-adm/v1/uc/group/exportGroups", this.query);
}