js之Ajax下载文件

传统上，客户端将依靠浏览器来处理从服务器下载文件。然而，这种方法需要打开一个新的浏览器窗口，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（）;

reader.onload = e => {

const anchor = document.createElement（'a'）;

anchor.style.display ='none';

anchor.href = e.target.result;

anchor.download = blob.name;

anchor.click（）;

};

reader.readAsDataURL（BLOB）;

}）;

这是一个工作示例。当你点击trigger时，我们创建一个抛弃锚点元素，它接收一个下载属性，其中包含我们想要保存的文件名以及由此生成的URL，

readAsDataURL()它实际上表示我们的数据为base64编码的字符串。然后，我们模拟新的元素上的点击事件来触发下载。

现在让我们从httpbin获取一个图像：

index.html

<DIV>

<a href='#' id='trigger'>请求图片和下载</a>

<img />

</ DIV>

main.js

我们正在为xxxx.org创建对JPEG图像的请求，并使用与之前相同的逻辑，将图像数据加载到一个blob

并将其下载到用户文件系统。

利用这种技术，我们可以优雅地将我们需要的所有额外属性添加到ajax请求中。你甚至可以将它包装在一个漂亮的Vue.JS或React组件中。

DEMO下载地址：https://dwz.cn/Jw3z6fVq