浏览器端用JS创建和下载文件
来源:互联网 发布:java调用动态链接库 编辑:程序博客网 时间:2024/06/06 21:42
浏览器端用JS创建和下载文件
1 需求
前端需要把获取的数据生成文件让用户下载,按照以往生成 a
标签 href
指向目的文件,不仅需要有已经生成的文件服务器路径,而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载
2 解决方案
2.1 下载取代加载:H5标签属性
HTML5
中 a
标签增加了 download
属性,点击链接时浏览器不会打开链接指向的文件,而是改为下载(目前只有chrome、firefox和opera支持),下载时会直接使用链接的名字来作为文件名(可给 download
加上文件名进行修改,如: download=“file.js”
)
2.2 生成文件:DataURI
用js将内容生成文件可以仿照图片 DataURI
的方式
<img src=”data:image/gif;base64,R0lGOXXXXX">
封装成一个下载方法
function downloadFile(aLink, fileName, content){ aLink.download = fileName; aLink.href = "data:text/plain," + content;}
调用 downloadFile
后,用户点击链接触发浏览器下载
3 改进方案
进一步放宽条件
- 取消下载类型限制
- 取消点击过程,直接下载
解决文件类型的问题,可用浏览器新API(URL.createObjectURL)来解决,URL.createObjectURL
通常用来创建图片 DataURI
显示图片,这里用来下载文件,参数是 File
对象(通过input[type=file]选择的文件)或 Blob
对象(二进制大对象),让浏览器自动设定文件类型
解决类型限制:用 content
创建 ObjectURL
并赋值给 aLink
即可解决文件类型的限制
文件自动下载:构建UI点击事件,再自动触发
function downloadFile(fileName, content){ var aLink = document.createElement('a'); var blob = new Blob([content]); var evt = document.createEvent("HTMLEvents"); evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错 aLink.download = fileName; aLink.href = URL.createObjectURL(blob); aLink.dispatchEvent(evt);}
调用downloadFile
,文件自动下载
阅读全文
0 0
- 在浏览器端用JS创建和下载文件
- 浏览器端用JS创建和下载文件
- 在浏览器端用JS创建和下载文件
- h5(H5)下载功能,用JS在浏览器中创建下载文件
- 浏览器端创建可下载文件
- 用JS在浏览器中创建下载文件如下可以做到
- JS创建文件下载
- 用js 触发 浏览器的下载功能下载文件
- 用js 触发 浏览器的下载功能下载文件
- JS前端创建html或json文件并浏览器导出下载
- JS前端创建html或json文件并浏览器导出下载
- JS实现文件下载(适应多种浏览器)
- 前端随记---文件下载启用浏览器下载和迅雷下载
- IE和火狐浏览器下载文件,文件命乱码
- Java创建文件夹和JSP下载文件
- 控制浏览器端下载或打开文件
- 清除浏览器下载的js 和 css 缓存
- 浏览器文件下载问题
- 准备重学java,
- QQ红包技术方案全解密
- 编程之路的开始
- 软件端口
- leetcode 541. Reverse String II 简单题也得多刷刷
- 浏览器端用JS创建和下载文件
- HDFS--机架感知
- python challenge 8
- B
- springmvc拦截器
- 51Nod-1425-减减数
- RCPND和中断未决寄存器INTPND以及外部中断未决寄存器EINTPEND分析
- htc vive 中SteamVR Plugins入门之抓取物体、投掷
- Leetcode-Remove Duplicates from Solided Array