在通过Ajax处理请求时,可能会遇到需要下载文件的情况,这里简要的说明下处理方法。

let downloadFile = document.getElementById("downloadImportInfo");
let fileUrl = "D:/test.xlsx"; // ajax获取到的文件地址
downloadFile.onclick = function () {
const xhr = new XMLHttpRequest();
let url = "localhost:8000/api/downloadUrl/" + fileUrl; //通过接口处理文件
xhr.responseType = 'blob';
xhr.onload = function () {
if (this.status == "200") {
//获取响应文件流  
let blob = this.response;
let a = document.createElement('a');
a.style = 'display:none';
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
a.download = "试验计划信息.xlsx";
a.href = e.target.result;
document.body.append(a);
a.click();
a.remove();
}
}
}
xhr.open("get", url, true);
xhr.send();
}

原生Ajax处理文件流的更多相关文章

  1. ajax和原生ajax、文件的上传

    ajax理解: ajax发送的请求是异步处理的.也就是说如下形式: function f1(){ $.ajax( { ....... success:function(){ a= return a } ...

  2. 原生ajax实现文件上传

    视图层 JS 函数:    <input type="file" onchange="sendFile()" id="up" /> ...

  3. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  4. Ajax异步请求返回文件流(eg:导出文件时,直接将导出数据用文件流的形式返回客户端供客户下载)

    在异步请求中要返回文件流,不能使用JQuery,因为$.ajax,$.post 不支持返回二进制文件流的类型,可以看到下图,dataType只支持xml,json,script,html这几种格式,没 ...

  5. python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  6. Day21 Django之Form文件上传、原生Ajax和实现抽屉实例

    一.Form文件上传 """ Django settings for prev_chouti project. Generated by 'django-admin st ...

  7. ajax 请求 后台返回的文件流

    download(url) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); // 也可以使用POST方式,根据接口 xhr. ...

  8. Django中的文件上传和原生Ajax

    概述 Django中的上传有3种方案: form 表单常规上传,但点击提交后会自动刷新页面 Ajax 上传,不刷新页面,(分为原生ajax上传和jQuery上传),IE7以上不兼容 iframe 上传 ...

  9. flask使用原生ajax、不使用表单(Form)上传文件

    〇.知识点 jquery ajax 文档告诉你可以使用默认的 application/x-www-form-urlencoded, multipart/form-data, or text/plain ...

随机推荐

  1. CF662C Binary Table (快速沃尔什变换FWT)

    题面 题解 我们会发现,如果单独的一列或一行,它的答案是O1确定的,如果确定了每一行是否变换,那么最后的答案也就简单了许多, 如果确定了行的变换状压下来是x(即x的i位表示第i行是否变换,理解就行), ...

  2. JavaScript之数组常用API

    这篇文章主要帮助大家简单理解数组的一些常用API用法,许多小伙伴常用方法记不住?别急,看完下面的介绍您一定就会明白各个方法是如何用的了.该文章适合新手小白看,大佬可以多多指点️! 1.数组的创建以及A ...

  3. MQ系列5:RocketMQ消息的发送模式

    MQ系列1:消息中间件执行原理 MQ系列2:消息中间件的技术选型 MQ系列3:RocketMQ 架构分析 MQ系列4:NameServer 原理解析 在之前的篇章中,我们学习了RocketMQ的原理, ...

  4. HBase 安装与配置及常用Shell命令

    HBase 安装与配置 首要配置 配置时间同步(所有节点上执行) yum -y install chrony vi /etc/chrony.conf #写入(7版本用server:8版本用pool): ...

  5. KingbaseES 绑定变量窥探机制

    概述: 对于数据严重倾斜的,极端如以下例子,不同的传入值,可能执行计划不同,制定执行计划时,就要求知道变量的值.对于绑定变量的情况,我们知道Oracle 有 _optim_peek_user_bind ...

  6. 02-MyBatisPlus入门

    快速开始参考:https://baomidou.com/pages/226c21/ 测试项目: mybatis_plus 数据库:mybatis_plus 一.创建并初始化数据库 1.创建数据库: m ...

  7. PLSQL Developer安装详细步骤,小白,转发

    下载软件可以直接在百度网盘里面下载 链接:https://pan.baidu.com/s/1bZNJ71d2-hvkM6PTbdpgAA 提取码:t9sh 然后直接参考这个链接进行安装https:// ...

  8. 使用 Loki 进行日志报警(一)

    转载自:https://mp.weixin.qq.com/s?__biz=MzU4MjQ0MTU4Ng==&mid=2247492352&idx=1&sn=9c0cc7927b ...

  9. 示例:Ingress通过互联网访问应用

    Ingress Ingress 是 Kubernetes 的一种 API 对象,将集群内部的 Service 通过 HTTP/HTTPS 方式暴露到集群外部,并通过规则定义 HTTP/HTTPS 的路 ...

  10. 最佳实践:4个黄金指标和USE方法

    Prometheus鼓励用户监控所有的东西,首先是及时发现问题其次是要能够快速对问题进行定位. 4个黄金指标 4个黄金指标可以在服务级别帮助衡量终端用户体验.服务中断.业务影响等层面的问题. 主要关注 ...