JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个一个标签,并将其href指向生成的URL,然后触发一个标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能。
这里所说的下载,有时候也可以理解为保存。出于安全考虑,JS肯定无法直接调用FileAPI写文件到磁盘,但是却可以通过下载来变相实现保存功能。
既然是用一个标签模拟,那么肯定要知道JS如何主动触发单击事件。
最简单的触发单击事件肯定是elem.click(),平时在不需要考虑兼容性的场合我都是这么干的,但是毕竟这个方法有兼容性(具体兼容性如何没做过测试),所以还是要掌握一个通用的方法。
以下代码是网上比较容易找到的一段代码,我在前面加了一段MouseEvent的判断:
/* *
*触发单击事件
* @param elem需要触发事件的DOM对象
*/函数fireClickEvent (elem)
{
var事件;
如果(window.MouseEvent)事件=new MouseEvent(“点击”);
其他的
{
事件=document.createEvent (“mouseevent”);
事件。initMouseEvent(“单击”,真的,假的,窗口,0,0,0,0,0,假的,假的,假的,假的,0,null);
}
elem.dispatchEvent(事件);
}
这个属性很重要,它可以指定下载文件名,并且可以告诉浏览器目标链接是一个下载链接,不是一个普通链接,我们看下面代码就能看出区别了:
& lt; a href="数据:文本/txt; charset=utf - 8,测试下载纯文本“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”下载="测试。txt”祝辞下载1 & lt;/a>
& lt; a href="数据:文本/txt; charset=utf - 8,测试下载纯文本“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞下载2 & lt;/a>
可以发现,下载1按钮能够实现下载,点击下载2链接时直接在浏览器打开文件内容了。
文件:///模式下貌似不生效;
链接指向一些第三方链接时也不会生效,具体有待研究,
假如给我们的不是一个下载地址而是一个团对象,我们可以通过URL.createObjectURL来给团对象生成临时URL,并且可以利用HTML5的下载属性来指定下载的文件名,好家伙,有了这2个东西我们就可以实现一个“万”能的弹出下载对话框方法了。
综上所述,我又在fireClickEvent的基础上继续简单封装了一个openDownloadDialog方法,使用如下:
saveName openDownloadDialog (url)
saveName openDownloadDialog (blob)
代码如下:
/* *
*通用的打开下载对话框方法,没有测试过具体兼容性
* @param url下载地址,也可以是一个团对象,必选
* @param saveName保存文件名,可选
*/函数openDownloadDialog (url, saveName)
{
如果(typeof url==韵蟆?,url instanceof Blob)
{
url=URL.createObjectURL (url);//创建团地址
}
var aLink=document.createElement (' a ');
aLink。href=https://www.yisu.com/zixun/url;
aLink。下载=saveName | |”;//HTML5新增的属性,指定保存文件名,可以不要后缀,注意,文件:///模式下不会生效
var事件;
如果(window.MouseEvent)事件=new MouseEvent(“点击”);
其他的
{
事件=document.createEvent (“mouseevent”);
事件。initMouseEvent(“单击”,真的,假的,窗口,0,0,0,0,0,假的,假的,假的,假的,0,null);
}
aLink.dispatchEvent(事件);
}
csv是一种逗号分隔的表格文件格式,可以很好的被Excel支持,由于其文件格式简单,所以经常用在简单的表格上面。最重要的是它是一种纯文本格式,可以很轻松地用JS来生成而不借助第三方库。
<强> 3.1.1。CSV格式示例
如下:
姓,名期中成绩,期末成绩
58岁的张三95
李四、98、74
38岁的王二,47岁
刘能,15100
黄五、87、68
excel打开效果如下:
<强> 3.1.2。初次尝试
首先想到的是使用数据:文本/txt;来实现,先看一下下载纯文本:
& lt;下载="测试。txt " href="数据:文本/txt; charset=utf - 8,测试下载纯文本“rel="外部nofollow”rel="外部nofollow”rel="外部nofollow”祝辞下载& lt;/a>
