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