js实现文件流下载文件

以下2个函数实现:函数一位原生ajax将请求的响应数据类型设置为blob,函数二是创建blob对象实现文件下载

复制代码
// http请求函数,支持配置请求和响应参数
function ajaxRequest(method, url, type) {
return new Promise((resolve, reject) => {
const req = new XMLHttpRequest();
req.open(method, url, true);
req.responseType = type;
req.onreadystatechange = () => {
// readyState == 4说明请求已完成
if (req.readyState === 4) {
const data = req.response;
// 获取文件名
const content = req.getResponseHeader('Content-Disposition');
const fileName = content && content.split(';')[1].split('filename=')[1];
if (req.status === 200 || req.status === 304) {
resolve({data, fileName});
}
else {
reject(data);
}
}
};
// 发送数据
req.send();
});
}

 

// 文件流转blob对象下载
function downloadFile(data, type, fileName) {
let blob = new Blob([data], {type: `application/${type};charset=utf-8`});
// 获取heads中的filename文件名
let downloadElement = document.createElement('a');
// 创建下载的链接
let href = window.URL.createObjectURL(blob);
downloadElement.href = href;
// 下载后文件名
downloadElement.download = fileName;
document.body.appendChild(downloadElement);
// 点击下载
downloadElement.click();
// 下载完成移除元素
document.body.removeChild(downloadElement);
// 释放掉blob对象
window.URL.revokeObjectURL(href);
}
复制代码

 

posted @   刘兵博客  阅读(3073)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示