前端数据流文件下载三种方式

1、直接使用get请求方式进行下载:

window.open(`${url}?${qs.stringify(param)}`, ‘_blank‘);

2、使用form 表单post请求进行下载:

const postDownloadFile = (action, param) => {
    const form = document.createElement(‘form‘);
    form.action = action;
    form.method = ‘post‘;
    form.target = ‘blank‘;
    Object.keys(param).forEach((item) => {
        const input = document.createElement(‘input‘);
        input.type = ‘hidden‘;
        input.name = item;
        input.value = param[item];
        form.appendChild(input);
    });
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

postDownloadFile(url, param);

3、axios(ajax)前端根据返回数据流生成文件下载:

axios.post(url, param, {
  responseType: ‘blob‘
}).then((res) => {
  console.log(‘res‘, res);
  const blob = res.data;
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onload = (e) => {
    const a = document.createElement(‘a‘);
    a.download = `文件名称.zip`;
    // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
    a.href = e.target.result;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
}).catch((err) => {
  console.log(err.message);
});

原文地址:https://www.cnblogs.com/webbest/p/10107697.html

时间: 2024-10-09 02:27:51

前端数据流文件下载三种方式的相关文章

ORACLE SQL前端补0的三种方式。

前端补0的三种方式. select lpad(sal,8,'0') from emp;select to_char(sal,'00000000') from emp;select substr('00000000'||sal,-8) from emp;

宿主机为linux、windows分别实现VMware三种方式上网(转)

一.VMware三种方式工作原理1 Host-only连接方式  让虚机具有与宿主机不同的各自独立IP地址,但与宿主机位于不同网段,同时为宿主主机新增一个IP地址,且保证该IP地址与各虚机IP地址位于同一网段.最终结果是新建了一个由所有虚机与宿主主机所构成的局域网,但该局域网与宿主主机本身所处的现有局域网是相互独立的,如果不做额外路由设置,这两个局域网之间不会连通,因此新建的局域网可以认为是一个单独从属于当前宿主主机的私有网络,其成员为当前宿主主机和相关的所有虚机,这也是Host-only命名的

jquery.validate+jquery.form提交的三种方式

原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种方式 概述:本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交方案. 方式一:是通过jquery.validate的submitHandler选项,即当表单通过验证时运行回调函数.在这个回调函数中通过jquery.form来提交表单: 方式二:是通过jquer

apache两种方案三种方式实现反向代理tomcat

目录 1.概述 2.方案一:以proxy_module方式反向代理 3.方案二:以mod_jk方式反向代理 4.总结 1.概述 在前一博客(http://zhaochj.blog.51cto.com/368705/1639740)中实现了tomcat的在standalone模式下的部署,这样tomcat就身兼职两职,一方向要对http的请求作出响应,又要处理JSP程序,而处理http请求不是tomcat的强项,所以这样的请求就交给httpd.nginx这样的的专业处理http请求的套件来处理,而

前端上传图片的三种方法

前端上传图片的三种方法 Django框架下,在前端上传文件,保存在数据库,并在前端不刷新页面显示上传图片. 利用XMLHttpRequest 对象和FormData对象上传文件 Ajax上传文件 基于form表单和iframe自己实现ajax请求 1.首先创建数据库表 class Img(models.Model): path = models.CharField(max_length=128) 更新数据库 >python manage.py makemigrations >python ma

创建一对多表结构实例 /操作的三种方式

例 1.注册App01  完成各项配置 2. 写完后自动生成一个id自增列(主键) 如果不想生成 自己写 创建两张表 3.执行创建语句 (其中还进行了一个小修改) 4.按照之前的方法 打开数据库 并输入数据 5.修改表结构 法一: 在更新时 遇到选择 因为已经存入数据 新建列默认不能为Null 默认为sa 注意输入的是字符串 刷新 法二: 法三: ====================== 接下来进行view 应该先看到业务线  再看到主机 1.urls 注意:如果同时有 bussiness

AngularJs学习——实现数据绑定的三种方式

三种方式: 方式一:<h5>{{msg}}</h5>  此方式在页面刷新的时候会闪现{{}} 方式二:<h5 ng-bind="msg"></h5> 方式三:<h5 ng-clock class="ng-clock">{{msg}}</h5> 示例代码: <!DOCTYPE html> <html lang="en" ng-app="myapp&q

小蚂蚁学习页面静态化(2)——更新生成纯静态化页面的三种方式

更新生成纯静态化页面的三种方式:1.按照时间间隔更新.2.手动更新.3.定时更新(需要系统配合). 1. 按照时间间隔更新. 当用户第一次访问这个页面的时候,程序自动判断,该静态文件是否存在,并且该文件是否还在有效时间内,如果该文件未超出了有效时间,用户访问的是已经生成的静态文件.如果超出了有效时间,用户得到的是动态输出的内容,同时重新生成静态文件.稍微修改一下昨天的代码为例: <?php //首先判断是否有静态文件,并且文件的最新修改时间到现在是否大于20秒 if(is_file('./tex

Linux中设置服务自启动的三种方式

有时候我们需要Linux系统在开机的时候自动加载某些脚本或系统服务 主要用三种方式进行这一操作: ln -s                       在/etc/rc.d/rc*.d目录中建立/etc/init.d/服务的软链接(*代表0-6七个运行级别之一) chkonfig                命令行运行级别设置 ntsysv                   伪图形运行级别设置 注意:1.这三种方式主要用于以redhat为基础的发行版 2.如果还不知道运行级别是什么,那么最