利用a标签导出csv文件
原文
简书原文:https://www.jianshu.com/p/a8687610cda3
大纲
1、需求分析
2、通过a标签实现文件导出
3、实现方式
1、需求分析
导出文件,使用最多的方式还是服务器端来处理。比如jsp中使用response的方式。
但是,有时候可能就想使用web前端是否也可以把页面上的内容导出来呢?比如说,导出页面的一个表格。
这个需求肯定是有答案的,只是对于各浏览器处理会稍微不一样。(主要是IE和其他浏览器的区别)。
在IE中使用ActiveXObject 实现,在firefox 和Chrome 中使用a标签(或者js)就可以实现了。
前端导出文件大部分还是通过服务器端的方式生成文件,然后传递到客户端。但很多情况下当我们导出CSV时并不需要后端参与,甚至没有后端。
做过WebGIS的同学经常会碰到这种场景,用户的兴趣点数据以csv文件形式上传到web应用中以表格形式展示,并可以编辑属性信息,编辑完成后需要将数据下载到本地。特别是对一些敏感数据,用户不希望传递到应用服务器端,整个过程完全在客户端进行。
2、通过a标签实现文件导出
2.1、通过a标签实现导出文件有两种方式
1、通过href属性来实现文件导出
2、通过download属性来实现文件导出(IE不兼容)
3、通过navigator.msSaveBlob来实现(IE专属,谷歌火狐不兼容)
2.2、需要注意
1、IE有独有的方法
2、谷歌和火狐推荐使用结合Bolb、createObjectURL的方式(需要注意这两者可能在低版本浏览器不兼容的情况)
3、需要注意的是在将数据导出成csv的时候需要先将数据转换成对应的格式,这样才能整齐导出
3、实现方式
3.1、IE浏览器
3.1.1、IE浏览器(IE10以下)
IE10以下,利用execCommand方法来保存csv文件
在实际应用中浏览器会打开一个新窗口,并弹出保存文件对话框,而对话框中保存类型时,只有html和text两项可选,此时需要在文件名中手动加上“.csv”后缀。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
</head>
<body>
<a id="mylink" href="#" onclick="clickDownload()">download</a>
</body>
<script>
function clickDownload(){
var text = "栏位1,栏位2,栏位3\n值1,值2,值3";
var fileName = "test.csv" var oWin = window.top.open("about:blank", "_blank");
oWin.document.write('sep=,\r\n' + text);
oWin.document.close();
oWin.document.execCommand('SaveAs', true, fileName);
oWin.close();
}
</script>
</html>
3.1.2、IE浏览器(IE10以上)
IE10以及Edge浏览器使用navigator.msSaveBlob(blob);虽然这些浏览器也支持execCommand的方法,但可以避免需要手动添加文件后缀。
msSaveBlob是IE的私有方法,只有IE10及以上和Edge浏览器支持。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
</head>
<body>
<a id="mylink" href="#" onclick="clickDownload()">download</a>
</body>
<script>
function clickDownload(){
var text = "栏位1,栏位2,栏位3\n值1,值2,值3";
var BOM = "\uFEFF";
var fileName = "test.csv"//名字不要写错,尤其是后缀,这关系到下载的文件格式
var csvData = new Blob([BOM + text], { type: 'text/csv' });
navigator.msSaveBlob(csvData, fileName);
}
</script>
</html>
3.2、Firefox、Chrome、Safari
3.2.1、 download基本使用模式
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
</head>
<body>
<a id="mylink" href="#" onclick="clickDownload()">download</a>
</body>
<script>
function clickDownload(){
var text = "栏位1,栏位2,栏位3\n值1,值2,值3";
var BOM = "\uFEFF";
var fileName = "test.csv"
var csvData = new Blob([BOM + text], { type: 'text/csv' }); let downloadLink = document.createElement('a');
downloadLink.href = 'data:attachment/csv;charset=utf-8,' + BOM + encodeURIComponent(text);
downloadLink.target = '_blank';
downloadLink.download = fileName;
downloadLink.click();
}
</script>
</html>
3.2.2、利用a标签的href和download属性
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
</head>
<body>
<a id="mylink" href="#" onclick="clickDownload()">download</a>
</body>
<script>
function clickDownload(){
var text = "栏位1,栏位2,栏位3\n值1,值2,值3";
var BOM = "\uFEFF";
var fileName = "test.csv"
var csvData = new Blob([BOM + text], { type: 'text/csv' }); let downloadLink = document.createElement('a');
downloadLink.href = 'data:attachment/csv;charset=utf-8,' + BOM + encodeURIComponent(text);
downloadLink.target = '_blank';
downloadLink.download = fileName;
downloadLink.click();
}
</script>
</html>
3.2.3、对href的属性进行设置——使用createObjectURL创建连接,适用于较大的文件
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
</head>
<body>
<a id="mylink" href="#" onclick="clickDownload()">download</a>
</body>
<script>
function clickDownload(){
var text = "栏位1,栏位2,栏位3\n值1,值2,值3";
var BOM = "\uFEFF";
var fileName = "test.csv"
var csvData = new Blob([BOM + text], { type: 'text/csv' });
let downloadLink = document.createElement('a');
downloadLink.href = window.URL.createObjectURL(csvData);
downloadLink.download = fileName;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
</script>
</html>
3.3.4、数据转换成Blob形式再设置为href的值
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
</head>
<body>
<a id="mylink" href="#" download="downlaod.csv">download</a>
</body>
<script>
var data = "栏位1,栏位2,栏位3\n值1,值2,值3";
var blob = new Blob([data], { type: 'text/csv' }); //new way
var csvUrl = URL.createObjectURL(blob);
document.getElementById("mylink").href = csvUrl;
</script>
</html>
参考网址
https://www.cnblogs.com/dojo-lzz/p/4837041.html
http://blog.csdn.net/oscar999/article/details/16342699
利用a标签导出csv文件的更多相关文章
- Web 端 js 导出csv文件(使用a标签)
前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...
- web前端导出csv文件
前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...
- 【转载】JS导出CSV文件
转自:http://www.cnblogs.com/dengnan/p/3990211.html 通过自己实际测试有以下几种方法 方法一通过a标签实现,把要导出的数据用“\n”和“,”拼接成一个字符串 ...
- Spring Boot下的一种导出CSV文件的代码框架
1.前言 CSV,逗号分隔值(Comma-Separated Values),即为逗号分隔的文本文件.如果值中含有逗号.换行符.制表符(Tab).单引号及双引号,则需要用双引号括起来:如果值中包含 ...
- 导出csv文件示例
导出csv文件示例 csv文件默认以英文逗号,做为列分隔符换行符\n作为行分隔符,写入到一个.csv文件即可.含有英文逗号,和换行符会发生数据输出会出现混乱,下面列出一些处理方法.特殊字符处理1.含有 ...
- mysql SQLyog导入导出csv文件
1.选择数据库表 --> 右击属性 --> 备份/导出 --> 导出表数据作为 --> 选择cvs --> 选择下面的“更改” --> 字段 --> 变量长度 ...
- PHP 读取/导出 CSV文件
工作中经常会有遇到导入/导出的需求,下面是常用的方法.读取CSV文件,可以分页读取,设置读取行数,起始行数即可.导出CSV文件,用两种方法进行实现. /** * 读取CSV文件 * @param st ...
- PHP导出CSV文件出现乱码的解决方法
在做项目时碰到使用外语的情况下,我们就会使用UTF-8编码.但是,在用PHP导出CSV文件时,如果写入的数据是使用UTF-8编码的日语.韩语之类的外文,就会出现乱码. 要解决PHP生成CSV文件的乱码 ...
- [转]PL/SQL Developer 导入导出csv文件
PL/SQL Developer 可以导入或者导出CSV文件. 导入CSV文件步骤: 1.选择tools->text importer.... 2.选择第二个Data to oracle选项卡, ...
随机推荐
- ActiveMQ学习总结(3)——spring整合ActiveMQ
1.参考文献 Spring集成ActiveMQ配置 Spring JMS异步发收消息 ActiveMQ 2.环境 在前面的一篇ActiveMQ入门实例中我们实现了消息的异步传送,这篇博文将如何在spr ...
- C# 的时间戳 在flash actionscript中使用
眼下在做一个项目,要以字节的方式传时间戳到flash中, 错误的就不写了.仅仅写一个能够使用的例如以下: C# DateTime centuryBegin = new DateTime(1970, 1 ...
- C++的class的样例
私有就是仅仅可以通过内部调用,在类外面是不可以使用私有成员的 简单的写一个 Class A { public: //你能够通过公有的函数去訪问私有成员 Demo() //能够在这使 ...
- 【基础练习】【线性DP】codevs2622 数字序列(最大连续子序列和)题解
版权信息 转载请注明出处 [ametake版权全部]http://blog.csdn.net/ametake欢迎来看 这道题目本质就是朴素的最大连续子序列和 直接上题目和代码 题目描写叙述 Descr ...
- SDUT--Pots(二维BFS)
Pots Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描写叙述 You are given two pots, having the ...
- 搜索 debian8.7.1 ,google vs baidu
国外的 Linux 比国内流行, debian官方网站只能找到当前版本DVD文件.想找旧版的Debian在百度一圈后徒劳无功,于是把目标转向 google ,只需要输入 debian?8.7.1-i3 ...
- Android开发经验之点击图片判断是否在图片范围之内
package xiaosi.grivaty; import android.content.Context; import android.graphics.Bitmap; import andro ...
- php课程 12-40 抽象类的作用是什么
php课程 12-40 抽象类的作用是什么 一.总结 一句话总结:定标准的 1.继承的关键词有哪两个? extendsparent 2.抽象类的实际意义是什么? 制造符合规范的产品你必须实现了抽象类里 ...
- javafx image button
public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...
- ORACLE10g R2【单实例 FS→单实例FS】
ORACLE10g R2[单实例FS→单实例FS] 本演示案例所用环境: primary standby OS Hostname pry std OS Version RHEL5.8 RHEL5. ...