JS实现弹出下载对话框及常见文件类型的下载


Posted in Javascript onJuly 13, 2017

1.写在前面

JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能。

这里所说的下载,有时候也可以理解为保存。出于安全考虑,JS肯定无法直接调用FileAPI写文件到磁盘,但是却可以通过下载来变相实现保存功能。

2.几个备用知识点

2.1. JS触发单击事件

既然是用A标签模拟,那么肯定要知道JS如何主动触发单击事件。

最简单的触发单击事件肯定是elem.click(),平时在不需要考虑兼容性的场合我都是这么干的,但是毕竟这个方法有兼容性(具体兼容性如何没做过测试),所以还是要掌握一个通用的方法。

以下代码是网上比较容易找到的一段代码,我在前面加了一段MouseEvent的判断:

/**
 * 触发单击事件
 * @param elem 需要触发事件的DOM对象
 */
function fireClickEvent(elem)
{
 var event;
 if(window.MouseEvent) event = new MouseEvent('click');
 else
 {
  event = document.createEvent('MouseEvents');
  event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
 }
 elem.dispatchEvent(event);
}

2.2. HTML5的download属性

这个属性很重要,它可以指定下载文件名,并且可以告诉浏览器目标链接是一个下载链接,不是一个普通链接,我们看下面代码就能看出区别了:

<a href="data:text/txt;charset=utf-8,测试下载纯文本" rel="external nofollow" rel="external nofollow" rel="external nofollow" download="测试.txt" >下载1</a>
<a href="data:text/txt;charset=utf-8,测试下载纯文本" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下载2</a>

可以发现,下载1按钮能够实现下载,点击下载2链接时直接在浏览器打开文件内容了。

补充说明:

file:///模式下貌似不生效;

链接指向一些第三方链接时也不会生效,具体有待研究;

2.3. JS弹出下载对话框

假如给我们的不是一个下载地址而是一个blob对象,我们可以通过URL.createObjectURL来给blob对象生成临时URL,并且可以利用HTML5的download属性来指定下载的文件名,好家伙,有了这2个东西我们就可以实现一个“万能”的弹出下载对话框方法了。

综上所述,我又在fireClickEvent的基础上继续简单封装了一个openDownloadDialog方法,使用如下:

openDownloadDialog(url, saveName)
openDownloadDialog(blob, saveName)

代码如下:

/**
 * 通用的打开下载对话框方法,没有测试过具体兼容性
 * @param url 下载地址,也可以是一个blob对象,必选
 * @param saveName 保存文件名,可选
 */
function openDownloadDialog(url, saveName)
{
 if(typeof url == 'object' && url instanceof Blob)
 {
  url = URL.createObjectURL(url); // 创建blob地址
 }
 var aLink = document.createElement('a');
 aLink.href = url;
 aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
 var event;
 if(window.MouseEvent) event = new MouseEvent('click');
 else
 {
  event = document.createEvent('MouseEvents');
  event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
 }
 aLink.dispatchEvent(event);
}

3.JS实现常见文件类型的下载

3.1. JS生成CSV文件并下载

csv是一种逗号分隔的表格文件格式,可以很好的被Excel支持,由于其文件格式简单,所以经常用在简单的表格上面。最重要的是它是一种纯文本格式,可以很轻松地用JS来生成而不借助第三方库。

3.1.1. CSV格式示例

如下:

姓名,期中成绩,期末成绩
张三,58,95
李四,98,74
王二,47,38
刘能,15,100
黄五,87,68

excel打开效果如下:

JS实现弹出下载对话框及常见文件类型的下载

3.1.2. 初次尝试

首先想到的是使用data:text/txt;来实现,先看一下下载纯文本:

<a download="测试.txt" href="data:text/txt;charset=utf-8,测试下载纯文本" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下载</a>

以上代码没毛病,然后再换成csv。换csv的最大问题就是如何处理换行,很简单,用encodeURIComponent编码一下就可以了:

<button onclick="test()">下载CSV</button>
<script>
function test()
{
 var csv = '姓名,期中成绩,期末成绩\n张三,58,95\n李四,98,74';
 var a = document.createElement('a');
 a.href = 'data:text/txt;charset=utf-8,'+encodeURIComponent(csv);
 a.download = '测试.csv';
 a.click(); // 这里偷个懒,直接用click模拟
}
</script>

3.1.3. 解决CSV乱码问题

虽然我们用的是UTF-8编码,下载后你会发现,用文本编辑器打开没问题,但是用Excel打开乱码:

别急,原因就是少了一个\ufeffBOM头,改成这样就没问题了:

<button onclick="test()">下载CSV</button>
<script>
function test()
{
 var csv = '姓名,期中成绩,期末成绩\n张三,58,95\n李四,98,74';
 var a = document.createElement('a');
 a.href = 'data:text/txt;charset=utf-8,\ufeff'+encodeURIComponent(csv);
 a.download = '测试.csv';
 a.click(); // 这里偷个懒,直接用click模拟
}
</script>

3.1.4. 继续解决下载文件名的问题

大部分浏览器可能都没啥问题,但是一些比较老的Chrome可能下载的时候指定的download就是不生效,此时可以用blob来解决:

var csv = '姓名,期中成绩,期末成绩\n张三,58,95\n李四,98,74';
var blob = new Blob(['\ufeff' + data], {type: 'text/csv,charset=UTF-8'});
openDownloadDialog(blob, '测试.csv');

建议一般情况下都用这种方法,稳妥一点。

3.1.5. 最后总结

不考虑兼容性的保存CSV方法:

/**
 * 保存CSV文件
 * @params csv csv文件内容
 * @params saveName 保存的文件名
 */
function saveCSV(csv, saveName)
{
 var a = document.createElement('a');
 a.href = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(csv);
 a.download = saveName;
 a.click();
}

考虑兼容性的保存CSV方法:

/**
 * 保存CSV文件
 * @params csv csv文件内容
 * @params saveName 保存的文件名
 */
function saveCSV(csv, saveName)
{
 var blob = new Blob(['\ufeff' + csv], {type: 'text/csv,charset=UTF-8'});
 openDownloadDialog(blob, saveName);
}

3.2. JS实现纯文本的下载保存

掌握了csv,再去下载纯文本基本上就没啥问题了,就是换一下文件类型而已:

var csv = '你好,我是小茗同学!\n测试换行!';
var blob = new Blob([data], {type: 'text/txt,charset=UTF-8'});
openDownloadDialog(blob, '测试.csv');

3.3. JS实现图片的下载保存

网页上一般要保存图片都是从canvas里面拿到的图片数据,通过toDataURL转换为base64数据:

/**
 * 将某个canvas保存为图片
 * @param canvasObj canvas对象
 * @param saveName 保存的名称
 * @param type 保存的图片格式,如 image/png
 * @param quality 图片质量,可选0-1
 */
function saveImage(canvasObj, saveName, type, quality)
{
 if(!canvasObj) return;
 type = type || 'image/png';
 quality = quality || 0.92;
 var url = canvasObj.toDataURL(type, quality).replace(/image\/.*?;/, 'image/octet-stream;');
 openDownloadDialog(url, saveName);
}

扩展

关于文件保存,不嫌麻烦的话,GitHub上面有个比较出名的库:https://github.com/eligrey/FileSaver.js/

demo:https://eligrey.com/demos/FileSaver.js/

以上所述是小编给大家介绍的JS实现弹出下载对话框及常见文件类型的下载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
javascript对象的创建和访问
Mar 08 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 #Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 #Javascript
浅谈关于axios和session的一些事
Jul 13 #Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 #Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 #Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 #Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 #jQuery
You might like
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
深入浅出学习python装饰器
2017/09/29 Python
python装饰器实例大详解
2017/10/25 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
如何理解python中数字列表
2020/05/29 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
新闻专业推荐信范文
2013/11/20 职场文书
幼教个人求职信范文
2013/12/02 职场文书
外贸业务员求职信范文
2013/12/12 职场文书
公司拓展活动方案
2014/02/13 职场文书
技术总监管理职责范本
2014/03/06 职场文书
办护照工作证明
2014/10/01 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python