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
js之Ajax下载文件的更多相关文章
- 如何用ajax下载文件
引子 在HTML5没来之前,浏览器想要下载文件,可能有这么几种方式: 借助a标签,<a href="学习资料.xlsx"></a> window.locat ...
- Ajax 下载文件 文件被损坏
问题表现 Ajax 下载文件成功后,打开提示格式损坏,源代码如下: axios({ method: 'get', url: "/public/工作簿1.xlsx", // 静态资源 ...
- Ajax下载文件(页面无刷新)
说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...
- js通过 URL下载文件
页面上一个button,点击之后触发一个function去请求数据,返回 pdf/epub 的URL,然后下载这个文件. 本来是直接用 a 写的,href里放资源地址,target设为'_blank' ...
- jQuery用FormData对象实现文件上传以及如何通过ajax下载文件
之前在Vue的项目里面用到过文件上传,封装好的组件用起来比较顺手,查询Element-UI文档,十八般武器样样都有,一顿操作猛如虎,一看--跑偏了(⊙o⊙)-,我的意思就是用框架实现比较简单,但是如果 ...
- 怎么用ajax下载文件
可能大家都觉得没有必要用ajax来下载东西,用window.open(url)就可以搞定 但是这有一个问题,就是这就限定了只能用GET方式来请求了: 可能你又会说GET很符合REST的要求呀. 但是如 ...
- python django + js 使用ajax进行文件上传并获取上传进度案例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- jquery.form.js ie 下下载文件已经ie8失效问题解决方案
https://github.com/malsup/form/blob/master/jquery.form.js在使用这个插件时遇到的问题1.ie下会变成下载文件,解决方案是在后端返回时设置'Con ...
随机推荐
- HTML基本入门完成
四. (一)丶下拉框select元素:一般可以创建单选或多选菜单.<select>与<option>一般同时使用,select代表下拉框,option代表他的每一项. 1.基本 ...
- CSRF 和 XSS 的区别
XSS 利用的是用户对指定网站的信任,CSRF 利用的是网站对用户网页浏览器的信任 XSS: 跨站脚本攻击 原名为Cross Site Scriptin,为避免和网页层级样式表概念混淆, 另名为XSS ...
- 如何用frp进行来无影去无踪
准备工作 和 注意事项: 1.frp 下载地址 https://github.com/fatedier/frp/releases 2. 需要给有公网ip 的服务端服务器 和 本地客户端服务器 各放一 ...
- 解决修改css或js文件后,浏览器缓存未更新问题
问题描述:最近在上线新版本项目的时候,发现有的用户的操作还是调用的老版本JS里面的内容,这样就造成原来新的JS里面加上的限制不能限制用户的操作,从而导致用户可以重复操作. 问题产生原因: 如果在用户之 ...
- jemter聚合报告参数指标
1.聚合报告指标含义 2.性能指标的名称与含义 1)并发: 所有用户在同一时刻对系统执行操作,一般指做同一件事情或操作.2)在线: 所有用户在一段时间内对系统执行操作.3) ...
- vue.js 进行初始化遇到的关于core-js的错误@core-js/modules/es6.array.find-index]
D:\vuejselement\workSpace\zutnlp_platform_show>cnpm install --save core-js/modules/es6.array.find ...
- 20175234 2018-2019-2 《Java程序设计》第六周学习总结
20175234 2018-2019-2 <Java程序设计>第六周学习总结 教材学习内容总结 第七章内部类和异常类 总结 Java支持在一个类中声明另一个类,这样的类称作内部类,而包含内 ...
- layui与echarts
https://pan.baidu.com/s/1qM5ybqD-wAQNnWubdegBiA 在此感谢Layui给我这种不懂前端的人很大的帮助
- 阿里云服务器配置phpstudy实现域名访问【图文教程】
首先,运行phpStudy,确保Apache和MySql启动,绿色代表正常启动状态. 然后配置站点域名,打开phpStudy的站点域名管理,1.设置域名(你有的域名,最后需要域名解析):2.设置文件的 ...
- Golang:sync.Map
由于map在gorountine 上不是安全的,所以在大量并发读写的时候,会出现错误. 在1.9版的时候golang推出了sync.Map. sync.Map 通过阅读源码我们发现sync.Map是通 ...