JS实现弹出下载对话框及常见文件类型的下载_js弹出下载选择框 - CSDN文库

139 浏览量更新于2023-05-04 评论收藏 85KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

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 保存文件名，可选

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38628150

粉丝: 4
资源: 936

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈