在通过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. Excelize 发布 2.6.0 版本,功能强大的 Excel 文档基础库

    Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库,基于 ECMA-376,ISO/IEC 29500 国际标准.可以使用它来读取.写入由 Microsoft Exc ...

  2. ESP8266 NONOS SDK学习

    一.概况 1.存储 ESP8266 带有 160 KB 的 RAM,其中 64 KB 为 iRAM,96 KB 为 dRAM.iRAM 进一步 分成两块:32 KB iRAM 块运行标有 IRAM_A ...

  3. docker-compose入门--翻译

    在这一页,你将学习到如何构建一个简单的python的web应用,并通过Docker compose来运行.这个应用程序使用的是Flask框架,并维护着一个存储在reids里的点击计数器.由于这个案例使 ...

  4. Java 多线程:线程池

    Java 多线程:线程池 作者:Grey 原文地址: 博客园:Java 多线程:线程池 CSDN:Java 多线程:线程池 工作原理 线程池内部是通过队列结合线程实现的,当我们利用线程池执行任务时: ...

  5. Mybatis 一级缓存和二级缓存原理区别 (图文详解)

    Java面试经常问到Mybatis一级缓存和二级缓存,今天就给大家重点详解Mybatis一级缓存和二级缓存原理与区别@mikechen Mybatis缓存 缓存就是内存中的数据,常常来自对数据库查询结 ...

  6. Promtail Pipeline 日志处理配置

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

  7. ProxySQL(12):禁止多路路由

    文章转载自:https://www.cnblogs.com/f-ck-need-u/p/9372447.html multiplexing multiplexing,作用是将语句分多路路由.开启了mu ...

  8. 清理rook-ceph

    官方步骤文档:https://rook.io/docs/rook/v1.8/ceph-teardown.html 请注意需要清理的以下资源: rook-ceph namespace: The Rook ...

  9. 第二章:视图层 - 1:URL路由基础

    路由的编写方式是Django2.0和1.11最大的区别所在.Django官方迫于压力和同行的影响,不得不将原来的正则匹配表达式,改为更加简单的path表达式,但依然通过re_path()方法保持对1. ...

  10. 回滚Deployment控制器下的应⽤发布

    若因各种原因导致滚动更新⽆法正常进⾏,如镜像⽂件获取失败."⾦丝雀"遇险等,则应该将应⽤回滚到之前的版本,或者回滚到由⽤户指定的历史记录中的版本. Deployment控制器的回滚 ...