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 保存文件名,可选
 */
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打开效果如下:

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实现弹出下载对话框及常见文件类型的下载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • JavaScript弹出对话框的三种方式

    学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性更精彩,实际上我们经常会在进行网页浏览时简单这种类型的对话框,在用户与应用程序进行双向交流时,经常要用到对话框. javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行

  • 上传文件返回的json数据会被提示下载问题解决方案

    最近项目中出现上传文件返回的json数据会被提示下载,只有在ie10+中才会出现这个问题.前端使用jQuery的插件ajaxForm提交表单,后台返回的数据格式为json.代码如下: 后端Python: 复制代码 代码如下: def jsonp(func):     """Wraps JSONified output for JSONP requests."""     @wraps(func)     def decorated_functio

  • JavaScript写的一个自定义弹出式对话框代码

    下图是我的设计思路 下面是具体的js代码 1,首先定义几个自定义函数 代码 复制代码 代码如下: //判断是否为数组 function isArray(v) { return v && typeof v.length == 'number' && typeof v.splice == 'function'; } //创建元素 function createEle(tagName) { return document.createElement(tagName); } //在

  • js中常用的弹出对话框3种方式

    1:只是提醒,不能对脚本产生任何改变: 2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 if...else...判断 3:一个带输入的对话框,可以返回用户填入的字符串,常见于某些留言本或者论坛输入内容那里的插入UBB格式图片 下面我们分别演示: 三种弹出对话框的用法实例 function ale() {//这个基本没有什么说的,就是弹出一个提醒的对话框 alert("我敢保证,你现在用的是演示一"); } function firm() {//利用对话框返回的值

  • js弹出模式对话框,并接收回传值的方法

    弹出对话框的页面A: 复制代码 代码如下: <script type="text/javascript">    function openDialog(){        paramers="dialogWidth:500px; dialogHeight:300px; status:no";        workerId = window.showModalDialog("userList.aspx","",p

  • JSP文件下载功能的4种方法

    对于网站来说,网站本身常常需要提供一些资源或者资料进行下载,说到下载莫过于最原始的方法就是在网页上提供下载的网址.今天讲述的还有另外的几种实现文件下载的方法,对于哪种方法更好这也是看自己的需求. 1.最直接最简单的,方式是把文件地址直接放到html页面的一个链接中.这样做的缺点是把文件在服务器上的路径暴露了,并且还无法对文件下载进行其它的控制(如权限).这个就不写示例了.  2.在服务器端把文件转换成输出流,写入到response,以response把文件带到浏览器,由浏览器来提示用户是否愿意保

  • 使用JS代码实现点击按钮下载文件

    正文 有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 font-awesome 上面的.使用时,首先将 font-awesome 整个文件夹下载下来,利用bower或者是自己去官网上面下载都行. 将整个文件夹放在项目文件中之后,在页面上面引入css文件 <link href="libs/font-awesome-4.7.0/css/font

  • JS弹出对话框实现方法(三种方式)

    本文实例讲述了JS弹出对话框实现方法.分享给大家供大家参考,具体如下: 1.警告框 <html> <head> <script type="text/javascript"> function disp_alert() { alert("我是警告框!!") } </script> </head> <body> <input type="button" onclick=&

  • js弹出确认是否删除对话框

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • ExtJS Ext.MessageBox.alert()弹出对话框详解

    复制代码 代码如下: Ext.onReady(function() { Ext.Msg.alert('提示', '逗号分隔参数列表'); //这种方式非常常见的 }); 效果图: 复制代码 代码如下: Ext.onReady(function() { //定义 JSON(配置对象) var config = { title:'提示', msg: 'JSON配置方式,简单吧' } Ext.Msg.show(config); }); 效果图: 上边我只是简单举例,好了看到了漂亮的界面了吧!接下来认识

  • 九种js弹出对话框的方法总结

    [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: 复制代码 代码如下: <script LANGUAGE="javascript"> <!-- window.open ("page.html") --> </script> 因为这是一段javascripts代码,所以它们应该放在<script LANGUAGE="javascript">标签和</s

  • 浅析Node.js实现HTTP文件下载

    前言 HTTP实现文件下载时,只要在服务器设置好相关响应头,并使用二进制传输文件数据即可,而客户端(浏览器)会根据响应头接收文件数据.而在Node.js中,设置好响应头后,读取文件流,再使用".pipe()"方法将流转接到响应对象Response就可以实现一个简单的文件下载服务器. 1. 文件下载介绍 HTTP基于请求头和响应头实现状态交互,在得到服务器正确响应状态后,而客户端首先会解析响应头,并根据响应头来接收和展示数据(响应体).对于文件下载来说,其实现过程如下: 1.客户端发起文

  • JS实现网页每隔3秒弹出一次对话框的方法

    本文实例讲述了JS实现网页每隔3秒弹出一次对话框的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3-sec-alert-dlg-codes/ 具体代码如下: <html> <head> <title>每隔3秒弹出对话框</title> </head> <body> 不要以为这是个空网页,一会就有东西弹出来~ <script lang

随机推荐