原生Ajax处理文件流
在通过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处理文件流的更多相关文章
- ajax和原生ajax、文件的上传
ajax理解: ajax发送的请求是异步处理的.也就是说如下形式: function f1(){ $.ajax( { ....... success:function(){ a= return a } ...
- 原生ajax实现文件上传
视图层 JS 函数: <input type="file" onchange="sendFile()" id="up" /> ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- Ajax异步请求返回文件流(eg:导出文件时,直接将导出数据用文件流的形式返回客户端供客户下载)
在异步请求中要返回文件流,不能使用JQuery,因为$.ajax,$.post 不支持返回二进制文件流的类型,可以看到下图,dataType只支持xml,json,script,html这几种格式,没 ...
- python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,
python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...
- Day21 Django之Form文件上传、原生Ajax和实现抽屉实例
一.Form文件上传 """ Django settings for prev_chouti project. Generated by 'django-admin st ...
- ajax 请求 后台返回的文件流
download(url) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); // 也可以使用POST方式,根据接口 xhr. ...
- Django中的文件上传和原生Ajax
概述 Django中的上传有3种方案: form 表单常规上传,但点击提交后会自动刷新页面 Ajax 上传,不刷新页面,(分为原生ajax上传和jQuery上传),IE7以上不兼容 iframe 上传 ...
- flask使用原生ajax、不使用表单(Form)上传文件
〇.知识点 jquery ajax 文档告诉你可以使用默认的 application/x-www-form-urlencoded, multipart/form-data, or text/plain ...
随机推荐
- 【AGC】如何使用认证服务与云数据库处理用户信息
使用场景 华为 AGC认证服务可以为应用快速构建安全可靠的用户认证系统,可以实现多种方式关联认证登录.而如何处理这些多种登录方式的用户信息,例如在应用中发布一个活动,哪些用户参加了哪一个活动,这些信 ...
- 「学习笔记」单调队列优化dp
目录 算法 例题 最大子段和 题意 思路 代码 修剪草坪 题意 思路 代码 瑰丽华尔兹 题意 思路 代码 股票交易 题意 思路 代码 算法 使用单调队列优化dp 废话 对与一些dp的转移方程,我们可以 ...
- KingbaseESV8R3对于order by null列的处理
背景 客户遇到一个现象order by 列是null的时候,最后一行总是显示相同的值.不要问我为什么对空值排序,意义何在?客户代码如此,客户不愿意改代码,作为dba大家都懂的.客户认为即使对null排 ...
- 使用Docker方式部署Gitlab,Gitlab-Runner并使用Gitlab提供的CI/CD功能自动化构建SpringBoot项目
1.Docker安装Gitlab,地址:https://www.cnblogs.com/sanduzxcvbnm/p/13814730.html 2.Docker安装Gitlab-runner,地址: ...
- Elasticsearch:使用 IP 过滤器限制连接
文章转载自:https://elasticstack.blog.csdn.net/article/details/107154165
- 升级openssl和openssh脚本
#!/bin/bash # 原先的版本号信息 # openssl version #OpenSSL 1.0.2k-fips 26 Jan 2017 # ssh -V #OpenSSH_7.4p1, O ...
- 单机部署minio,设置Nginx代理,配置https(TLS)访问
安装 下载地址:https://dl.min.io/ # 创建目录 mkdir -p /usr/local/minio/{data,bin,etc} # 下载minio wget https://dl ...
- gitlab添加新用户
添加用户的时候没法给用户设置密码,可以等用户添加后,编辑用户的时候给用户设置密码 新用户首次登陆后需要重置密码 新用户登陆后是英文界面,设置成中文界面
- 修改因python是3版本导致的yum问题
问题原因: 系统自带的python出来的是2版本,但是因为某些原因,比如安装使用ElartAlert,导致执行python出来的是3版本. 此时执行yum相关的命令,会报错,具体错误信息如下: [ro ...
- 利用python对websocket进行并发压测
简述 产品经理鉴于运营反馈并对程序的websocket长连接保持怀疑的态度,让我对websocket服务器进行压力测试,我内心是拒绝的. 开发思路 查阅websocket的相关资料,查到python的 ...