浏览器端用JS创建和下载文件

浏览器端用JS创建和下载文件

1 需求

前端需要把获取的数据生成文件让用户下载,按照以往生成 a 标签 href 指向目的文件,不仅需要有已经生成的文件服务器路径,而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载

2 解决方案

2.1 下载取代加载:H5标签属性

HTML5a 标签增加了 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 条评论
登录 后参与评论

相关文章

来自专栏极乐技术社区

微信小程序开发详解《三》APP生命周期

1:微信小程序APP的生命周期方法: 在微信小程序工程中的app.js中增加如图所示方法 ? 编译运行,查看日志如图所示:微信小程序启动时,调用生命周期方法为:...

241100
来自专栏全栈之路

游戏优化之音频压缩

其实这个比较容易忽略掉,但是音频资源如果不压缩的话,可能会造成游戏加载速度慢,尤其是对于一些音频资源依赖较高的游戏。

28930
来自专栏IT 指南者专栏

Angular 框架学习笔记(一)

过来人肯定都知道, Angular 是一个框架,为何现在突然要学 Angular 呢?

15030
来自专栏吴伟祥

Fiddler是位于客户端和服务器端的HTTP代理(目前最常用的http抓包工具之一)

抓包工具有很多,小到最常用的web调试工具firebug,达到通用的强大的抓包工具wireshark.为什么使用fiddler?原因如下:

17440
来自专栏Jerry的SAP技术分享

微信程序开发系列教程(四)使用微信API创建公众号自定义菜单

大家可能经常看到一些微信公众号具有功能强大的自定义菜单,点击之后可以访问很多有用的功能。

12210
来自专栏wblearn

程序员的你是否熟练掌握Chrome开发者工具?

回归正题,本文主要是介绍一下Chrome developer tool(开发者工具)的使用,以方便我们的日常开发与调试。其实在没用Chrome开发之前就时不时的...

13340
来自专栏Youngxj

QQ网址强制变XML卡片消息工具

3.1K60
来自专栏游戏杂谈

预加载JavaScript/CSS但不执行

好吧,一个方案一个方案来分析一下(要求是不允许执行Javascript和应用CSS,以免消耗系统资源):

19420
来自专栏全栈之路

关于win10子系统(ubuntu)

关于如何安装安装ubuntu,之前都是需要下载安装一个虚拟机,然后下载镜像安装包,不过现在已经不需要那么麻烦了。安装教程:Win10安装Ubuntu子系统教程(...

77120
来自专栏CodingToDie

Selenium - Web Browser Automation, 没有你想象的那么难

从去年开始接触 selenium,中间间隔了几个月,最近几天又开始使用,在此总结一下这两次使用的经验

13340

扫码关注云+社区

领取腾讯云代金券