原生JS实现Ajax下载文件

简介: 原生JS实现Ajax下载文件
/**
 * url 下载url
 * filename 下载文件名称
 */
function download(url, filename) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true); xhr.send() //发送ajax请求
    xhr.setRequestHeader('token', $.cookie('token'));
    xhr.setRequestHeader('version', '2');
    xhr.responseType = "blob"; // 设置返回类型blob
    // 定义请求完成的处理函数,请求前也可以增加 加载框/禁用下载按钮的相关逻辑
    xhr.onload = function() {
        if (this.status === 200) {
            var blob = this.response;
            var reader = new FileReader();
            reader.readAsDataURL(blob); // 转换为base64,可以直接放入a标签href
            reader.onload = function(e) {
                // 转换完成后创建a标签下载
                var a = document.createElement('a');
                a.download = filename;
                a.href = e.target.result;
                $("body").append(a);
                a.click();
                $(a).remove();
            }
        }
    };
}
相关文章
|
21天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
22天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
3月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
61 1
|
22天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
4月前
|
前端开发 JavaScript 索引
|
5天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
9 1
|
8天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
22天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
2月前
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
27 0
|
2月前
|
XML 前端开发 JavaScript
node.js第三天-----ajax(3)
node.js第三天-----ajax(3)
26 0