ajax+批量下载文件

本文介绍了如何使用HTML5的File API和Ajax技术实现批量文件下载,避免了传统方法中打开新窗口或iframe的不便。通过创建Blob对象并在用户点击时触发下载,实现了在浏览器内优雅地下载文件。示例代码展示了如何创建和下载文本文件以及从服务器请求图像并下载。这种方法还允许在Ajax请求中添加额外属性,适合集成到Vue.JS或React组件中。
摘要由CSDN通过智能技术生成

传统上,客户端将依靠浏览器来处理从服务器下载文件。然而,这种方法需要打开一个新的浏览器窗口,iframe或任何其他类型的不友好和黑客行为。为下载请求添加额外的头信息也很困难。更好的解决方案是使用HTML5 File API以及XMLHttpRequest或请求库。

File API允许您在浏览器中创建,加载和操作文件。我们可以使用a Blob 创建一个内存文件:

const blob = new Blob(['lorem ipsum'],{type:'text / plain'});

通过一些额外的工作,我们可以将这个文件下载到我们的文件系统中:

index.html

<DIV>

<a href='#' id='trigger'>创建并下载Lorem Ipsum </a>

</ DIV>

 

main.js

const trigger = document.querySelector('#trigger');

trigger.addEventListener('click',()=> {

const blob = new Blob(['lorem ipsum'],{type:'text / plain'});

blob.name ='lorem.txt'

const reader = new FileReader();

r

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr_Zang666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值