jq 实现文件下载

TechCodeAI启航

已于 2024-05-29 15:19:42 修改

阅读量4.2k

点赞数 4

文章标签： javascript 前端 html

于 2022-02-25 14:33:59 首次发布

本文链接：https://blog.csdn.net/weixin_54165147/article/details/123132504

版权

本文介绍了如何在前端通过Ajax获取后端返回的二进制流，并利用Blob对象和隐藏a标签实现文件下载。关键在于设置xhrFields的responseType为'arraybuffer'，然后转换为Blob，最后通过创建ObjectURL触发下载。适用于需要从后端获取二进制数据并下载的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🐱 个人主页：TechCodeAI启航，公众号：SHOW科技

🙋‍♂️ 作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！

💫 优质专栏：前端主流技术分享

📢 资料领取：前端进阶资料可以找我免费领取

🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！

后端返回一定要是返回二进制流，我这个版本才可以使用，其他的那些网上一大堆，我就不发了。

//获取当前页面隐藏a标签，思路就是隐藏域，如果对隐藏域不懂可以去看我之前的文章
var donload = document.getElementById('donload')

let url = "当前链接地址";
$.ajax({
		url:url,
		type:"get",
        //下面这句代码是关键 如果不行的话可以试试 responseType: 'blob',
		xhrFields: { responseType: "arraybuffer" },
		success:function(res){
			var blob = new Blob([res]);
			donload.download = name;
			donload.href=window.URL.createObjectURL(blob);
			donload.click()
		},
})