前端可以使用JavaScript在客户端下载包含页面数据的文件,这里以下载CSV格式文件为例,代码如下:

function downloadData(data, filename, type) {
var file = new Blob(["\ufeff" + data], { type: type });
if (window.navigator.msSaveOrOpenBlob)
// IE10+
window.navigator.msSaveOrOpenBlob(file, filename);
else {
// Others
var a = document.createElement("a"),
url = URL.createObjectURL(file);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
}

让我们解释一下这段代码:

(一)downloadData 函数

首先,downloadData函数接收三个参数:

  1. data:需要下载的数据(注意数据格式需要符合csv格式规范);
  2. filename:需要下载的文件名,注意需要添加符合数据格式的文件名的后缀,这提示了操作系统应该以何种方式打开;
  3. type:代表了将会被放入到Blob对象中的数组内容的MIME类型;

(二)Blob 构造函数

接着,我们来解析下面这条语句:

var file = new Blob(["\ufeff" + data], { type: type });

可以看到,我们使用了Blob构造函数,创建了一个Blob实例对象fileBlob构造函数有什么用呢?它接收的两个参数是什么?让我们在下面一一作答:

① Blob 构造函数的作用

Blob构造函数会根据传入的数组参数构造出一个新的Blob对象实例,该对象实例的值由以下两步生成:

  1. Blob构造函数会将第一个参数,即一个数组内的所有值串联起来;
  2. Blob会将被串联的值转换为二进制编码的数据然后返回;

注意,Blob对象实例的值是不可变的,它只有两个只读的属性:size:表示对象中所包含数据的大小(单位是字节),以及type:值是一个字符串,表示该对象实例所包含数据的MIME类型(即我们传入Blob构造函数的第二个参数中指定的type值,默认为"")。

② Blob 构造函数接收的参数

Blob构造函数接收的第一个参数为数组类型,数组内的所有值会在实例化时被串联。若传入数组的值中有DOMString类型的值,则会被编码为UTF-8格式。而为了让导出的CSV格式文件在Excel中打开时,中文不出现乱码,需要在数组的首位添加一个BOM(Byte Order Mark “字节次序标记”)头\ufeff

BOM是一个不可见的字符,它是ES5新增的空白符,在Unicode3.2之前,\uFEFF表示“零宽不换行空格(Zero Width No-Break Space)”,但在Unicode3.2之后,新增了\u2060表示零宽不换行空格,\uFEFF就只用来表示字节次序的标记了。而在Microsoft中,其记事本程序发明了一种UTF-8变体(Python 2.5称为“utf-8-sig”)以提高可检测到UTF-8编码的可靠性,该编码要求在任何Unicode字符被写入之前都需要编写一个UTF-8编码的BOM(看起来像是一个字节序列:0xef,0xbb,0xbf)。

Blob构造函数接收的第二个参数是一个对象,该对象有以下两个属性:

  1. type:默认值为"",它表示第一个参数内,数组内容的MIME类型;
  2. options:这个属性目前还没有被很好的支持,所以不用管它;

总之,我们通过new Blob()获得了一个Blob类型的二进制文件。


(三)下载文件

接着我们要做的便是下载我们生成好的文件了,有两种方式,第一种方式最简单,因为IE浏览器直接提供了下载文件的接口window.navigator.msSaveOrOpenBlob(file, filename);,正如函数签名所示,我们只需要向函数中传入我们生成好的二进制文件,以及文件名就可以让浏览器自动下载文件了。

抛下IE浏览器,要实现文件下载就稍微麻烦些,我们需要通过创建一个a标签,并模拟点击这个a标签实现文件下载,让我们将与之相关的代码贴在下面:

var a = document.createElement("a"),
url = URL.createObjectURL(file);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);

注意这段代码的第二行,我们会发现一个新的API:URL.createObjectURL()函数,这个函数接收一个参数,一个Blob对象,并为该对象生成一个指向该对象的URL对象,需要注意的是只要当下文档没有被关闭,该URL对象就会一直存储在内存中不会被回收,因此一旦确定不再需要该URL对象,一定要及时使用URL.revokeObjectURL()清理。

以上,我们就解释了在前端以CSV格式下载数据的方法和原理,需要注意的是,该段代码只适用于IE10及以上的现代浏览器,因为无论是Blob构造函数还是URL.createObjectURL()API都只有这些浏览器提供支持。

使用JavaScript下载csv文件的更多相关文章

  1. javascript导出csv文件(excel)

    这里贴出JavaScript导出csv文件(excel)的代码. /** * 导出excel * @param {Object} title 标题列key-val * @param {Object} ...

  2. 利用php CI force_download($filename, $data) 下载.csv 文件解决文件名乱码,文件内容乱码

    利用php CI force_download($filename, $data) 下载.csv 文件解决文件名乱码,文件内容乱码 2014-07-31 12:53 1047人阅读 评论(0) 收藏  ...

  3. response下载csv文件内容乱码问题

    response下载csv文件内容乱码问题 解决办法:在输出流语句第一行输出 out.write(new byte[]{(byte)0xEF, (byte)0xBB, (byte)0xBF}); Se ...

  4. 108.生成和下载csv文件

    生成CSV文件 有时候我们做的网站,需要将一些数据,生成一个csv文件返回浏览器,并且是作为附件的形式下载下来. 生成小的csv文件: 生成一个小的csv文件,我们用Python内置的csv模块来处理 ...

  5. js实现使用文件流下载csv文件

    1. 理解Blob对象 在Blob对象出现之前,在javascript中一直没有比较好的方式处理二进制文件,自从有了Blob了,我们就可以使用它操作二进制数据了.现在我们开始来理解下Bolb对象及它的 ...

  6. 上载和下载CSV文件

    sap中把txt .excel .文件上载到内表中,txt和csv速度最快. excel文件导出的csv是用,分隔符分隔的,如果单元格的文本中就有逗号,这样会和分隔符逗号混淆,最好abap产生csv文 ...

  7. 【Github】如何下载csv文件/win10如何修改txt文件为csv文件

    csv文件:逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号) 右键点击raw按钮,选择目标另存为,下载的是txt文件 win10如何 ...

  8. 如何从GitHub下载csv文件

    当打开存.csv文件的页面时,不用直接点击页面的Download,这样会使csv文件直接用浏览器打开. 要点击Raw按钮,鼠标右键,文件另存为,可以直接把csv文件下载到本地.

  9. 将php数据下载csv文件

    <?php $sales = array( array( 'Northeast', '2005-01-01', '2005-02-01', 12.54 ), array( 'Northwest' ...

随机推荐

  1. struts2漏洞原理

    一.struts2简介: 目前web框架中非常流行的都是mvc设计模式.经典例子例如:python的Django.Flask:java的ssm等.因为使用MVC设计模式,所以在框架内部处理用户数据流参 ...

  2. 【黑金ZYNQ7000系列原创视频教程】07.自定义IP——定制RTC IP实验

    黑金论坛地址: http://www.heijin.org/forum.php?mod=viewthread&tid=36641&extra=page%3D1 爱奇艺地址: http: ...

  3. EUI组件之TextInput

    输入文本,被废弃的组件,可以用EditableText代替

  4. HTML5+CSS3 表格设计(Table)

    <style> body { width: 600px; margin: 40px auto; font-family: 'trebuchet MS', 'Lucida sans', Ar ...

  5. SMGP关键代码

    从网上下载java的API就可以开发了我们需要修改的类是: import java.io.IOException; import cn.com.zjtelecom.smgp.Client; impor ...

  6. ionic+cordova开发!

    这里是一些学习的过程中纪录的: 官方网站: http://www.ionic-china.com/ 参考文章: https://blog.csdn.net/xyzz609/article/detail ...

  7. 豆瓣API接口开发,结合angularJS来做,感觉爽歪歪!

    第一次做还是先说下API 是什么鬼? API : application program interface 应用程序编程接口: 有那些常见的API: webAPI : 通过WEB方式提供结构叫 WE ...

  8. 我的天$删除注册表$安装mysql最后一步不能启动服务的解决办法

    我是照着参考资料一步一步删除的,只是我的Win7 64位的电脑比较犟,硬是要我重启电脑才能成功!强烈建议最好是重启电脑再装! 使用MySQL都有过重装的经历,要是重装MySQL基本都是在最后一步通不过 ...

  9. pta 习题集5-6 堆栈操作合法性

    假设以S和X分别表示入栈和出栈操作.如果根据一个仅由S和X构成的序列,对一个空堆栈进行操作,相应操作均可行(如没有出现删除时栈空)且最后状态也是栈空,则称该序列是合法的堆栈操作序列.请编写程序,输入S ...

  10. 牛客网多校赛第七场A--Minimum Cost Perfect Matching【位运算】【规律】

    链接:https://www.nowcoder.com/acm/contest/145/A 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524 ...