在通过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. Excel 逻辑函数(二):AND 和 OR

    前言 AND 函数是且:OR 函数是或.AND 函数中的条件必须都满足才返回 TRUE:OR 函数中的条件只要满足一个就返回 TRUE.AND 和 OR 的参数最多允许有 30 个. AND [题目] ...

  2. APICloud AVM框架 封装车牌号输入键盘组件

    AVM(Application-View-Model)前端组件化开发模式基于标准Web Components组件化思想,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具,完 ...

  3. Job And Schedule (V8R6C4)

    KingbaseES 数据库提供了 kdb_schedule 扩展,使得用户能通过类似oracle job 的方式进行job调用.kdb_schedule 提供了三个Schema :dbms_job ...

  4. mysql_唯一索引数据重复问题总结

    CREATE TABLE `tt_transfer_assemble_diffuse_plan_info` ( `id` bigint(20) unsigned NOT NULL AUTO_INCRE ...

  5. Docker安装Redis并使用Another Redis Desktop Manager连接

    Redis简单介绍 Redis全称是Remote DIctionary Service,即远程字典服务.Redis 是一个使用C语言编写的.开源的(遵守 BSD 协议).高性能的.支持网络.可基于内存 ...

  6. Linux安装Minio

    Linux安装Minio 一.安装包方式安装 1.下载minio 1.1 手动下载:https://docs.min.io/docs/minio-quickstart-guide.html ​ 访问上 ...

  7. Java根据Freemarker模板生成Word文件

    1.  准备模板 模板 + 数据 = 模型 1.将准备好的Word模板文件另存为.xml文件(PS:建议使用WPS来创建Word文件,不建议用Office) 2.将.xml文件重命名为.ftl文件 3 ...

  8. 路径参数:Path Parameters

    官方文档地址:https://fastapi.tiangolo.com/zh/tutorial/path-params/ # -*- coding: UTF-8 -*- from fastapi im ...

  9. k8s ingress-nginx 使用 snippet 添加自定义配置 (比如:新增请求头)

    比如在有些时候我们需要在 server 里或者 location 里添加一些参数,例如添加包体大小限制.添加跨域配置.添加自定义header.处理响应header等等.遇到这些需求的时候,我们开始怀念 ...

  10. Python微服务实战

    文档地址:https://www.qikqiak.com/tdd-book/ GitHub地址:https://github.com/cnych/flask-microservices-users 源 ...