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

1.写在前面

为了实现下载功能，JS一般包括以下过程：生成下载URL，动态创建一个A标签，将其href指向生成的URL，然后触发A标签的点击事件，会弹出下载对话框，从而实现下载功能。

在这里下载有时可以理解为保存。出于安全考虑，JS不能直接调用FileAPI将文件写入磁盘，但可以通过下载实现保存功能。

2.几个多余的知识点

2.1.JS触发点击事件

因为它是用A标签模拟的，所以我们必须知道JS是如何主动触发点击事件的。

最简单的触发器click事件一定是elem.click()，在不需要考虑兼容性的时候我通常会这么做。但是这个方法毕竟有兼容性(具体的兼容性还没有测试过)，所以我们还是需要掌握一个通用的方法。

下面的代码是一段在网上很容易找到的代码。我在前面加了一个MouseEvent的判断：

/* * *触发点击事件* @param elem需要DOM对象来触发事件*/function fireclikevent(elem){ varevent；if(窗口。MouseEvent)事件=新的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(事件)；}下载2.2.html5的属性

这个属性非常重要。它可以指定下载文件名，告诉浏览器目标链接是下载链接，不是普通链接。我们可以通过查看下面的代码来看出区别：

a href=' data : text/txt；Charset=utf-8，test download纯文本' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' download=' test . txt ' download 1/aa href=' data : text/txt；Charset=utf-8，test download纯文本' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' download 2/a，可以发现download 1按钮可以实现下载，而当你点击download 2链接时，可以直接在浏览器中打开文件内容。

补充说明：

在file:///模式下似乎不会生效；

链接指向某些第三方链接时不会生效，需要研究；

2.3.JS弹出下载对话框

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

综上所述，我继续简单打包一个基于fireClickEvent的openDownloadDialog方法，使用如下：

opendownloadialog(URL，savename)opendownloadialog(blob，save name)代码如下：

/* * *打开下载对话框的一般方法尚未经过特定兼容性测试。* @param url下载地址也可以是blob对象。必须选择* @param saveName来保存文件名。*/function open download dialog(URL，SaveName){ if(type of URL==' object ' URL instance of Blob){ URL=URL . CreateObjectURl(URL)；//创建blob地址} varalink=document . create element(' a ')；aLink.href=urlaLink.download=saveName | |HTML5的新属性指定了要保存的文件名，但不需要后缀。请注意，var事件在file:///模式下不会生效；if(窗口。MouseEvent)事件=新的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(事件)；}3.JS下载常见的文件类型

3.1.JS生成CSV文件并下载

Csv是逗号分隔的表格文件格式，Excel可以很好的支持。由于其简单的文件格式，CSV经常用于简单的表格。最重要的是它是纯文本格式，JS可以很容易的生成，不需要第三方库的帮助。

3.1.1的例子。CSV格式

如下所示：

姓名，期中成绩，期末成绩张三，58，95李四，98，74王二，47，38刘能，15，100黄武，87，68徐克开门红如下：

3.1.2.首次尝试

首先想到的是使用data : text/txt；要实现这一点，首先看一下下载纯文本：

下载测试。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/buttonscript函数test () {var CSV='姓名，期中成绩，期末成绩\n张三，58，95\n李四，98，74 '；var a=document . create element(' a ')；a . href=' data : text/txt；charset=utf-8，' encodeURIComponent(CSV)；A.download=' test。CSV '；a . click()；//这里拿一个偷懒的作业，用click直接模拟一下}/script3.1.3 .解决CSV乱码的问题

虽然我们用的是UTF-8编码，但是下载后你会发现用文本编辑器打开就可以了，但是用Excel打开乱码：

别担心，原因是少了一个\ufeffBOM头，所以不会有问题：

Button onclick='test()'下载CSV/buttonscript函数test () {var CSV='姓名，期中成绩，期末成绩\n张三，58，95\n李四，98，74 '；var a=document . create element(' a ')；a . href=' data : text/txt；charset=utf-8，\ ufeff ' encodeURIComponent(CSV)；A.download=' test。CSV '；a . click()；//在这里偷懒作业，直接用click }模拟一下/script3.1.4 .继续解决文件名下载问题

大多数浏览器可能没有问题，但一些较旧的Chrome可能不会在下载时生效。此时，它可以用blob来求解：

Var csv='姓名，期中成绩，期末成绩\n张三，58，95\n李四，98，74 '；var blob=新Blob(['\ufeff' data]，{type: 'text/csv，charset=UTF-8 ' })；opendownloadialog(blob，' test。CSV’)；建议一般采用这种方法，应该比较安全。

3.1.5.最后总结

保存CSV方法，不考虑兼容性；

/* * *保存CSV文件* @params csv csv文件内容* @params saveName保存的文件名*/函数savecsv (CSV，save name){ var a=document . create element(' a ')；a . href=' data : text/CSV；charset=utf-8，\ ufeff ' encodeURIComponent(CSV)；a.download=saveNamea . click()；}考虑兼容性的保存CSV方法：

/* * *保存CSV文件* @params csv csv文件内容* @params saveName保存的文件名*/函数savecsv (CSV，save name){ var blob=new blob([' \ ufeff ' CSV]，{type3360' text/CSV，charset=utf-8 ' })；opendownloadialog(blob，save name)；}3.2.JS下载并保存纯文本

掌握csv，下载纯文本基本没问题，只是改变文件类型：

Var csv='大家好，我是小明的同学！“测试换行！”；var blob=new Blob([data]，{type: 'text/txt，charset=UTF-8 ' })；opendownloadialog(blob，' test。CSV’)；3.3.JS下载并保存图片

一般来说，保存在网页上的图片是从画布上获得的图片数据，通过toDataURL转换成base64数据：

/* * *将画布另存为图片* @ param canvasObj画布对象* @param saveName保存的名称* @param type保存的图片格式，如image/png * @param quality图片质量，0-1 */函数保存图像(canvasObj，saveName，type，quality) {if(！canvasObj)返回；type=type | |“image/png”；质量=质量| | 0.92；var url=canvasObj.toDataURL(类型，质量)。替换(/image\/)。*?/，“图像/八位字节流；”);opendownloadialog(URL，SaveName)；}扩展

关于文件保存，如果不太麻烦的话，GitHub上有一个知名的库：https://github.com/eligrey/FileSaver.js/

演示：https://eligrey.com/demos/FileSaver.js/

以上是JS弹出的下载对话框和边肖介绍的常用文件类型的下载。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！