javascript导出csv文件(excel)
这里贴出JavaScript导出csv文件(excel)的代码。
/**
* 导出excel
* @param {Object} title 标题列key-val
* @param {Object} data 值列key-val
* @param {Object} fileName 文件名称
*/
function JSONToExcelConvertor(title, data, fileName) {
var CSV = '';
var row = ""; for (var i = 0; i < title.length; i++) {
if(title[i].title){
row += title[i].title + ',';
}
}
row = row.slice(0, -1);
CSV += row + '\r\n'; for (var i = 0; i < data.length; i++) {
var row = "";
for (var j = 0; j < title.length; j++) {
if(title[j].title){
row += '"' + (data[i][title[j].field] ? data[i][title[j].field] : "") + '"\t,';
}
}
row.slice(0, row.length - 1);
CSV += row + '\r\n';
} if (CSV == '') {
alert("Invalid data");
return;
} var fileName = fileName;
var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURI(CSV);
var link = document.createElement("a");
link.href = uri; link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
上面的写法,如果excel中的数据太多,就会导致无法导出的结果,原因是浏览器对URL的长度有限制,因此要使用Blob对象和window.URL.createObjectURL()方法做一下改造。
window.URL.createObjectURL()方法可以直接生成blob:开头的链接,该链接产生于浏览器端,不会占用服务器资源。
/**
* 导出excel
* @param {Object} title 标题列key-val
* @param {Object} data 值列key-val
* @param {Object} fileName 文件名称
*/
function JSONToExcelConvertor(title, data, fileName) {
var CSV = '';
var row = ""; for (var i = 0; i < title.length; i++) {
if(title[i].title){
row += title[i].title + ',';
}
}
row = row.slice(0, -1);
CSV += row + '\r\n'; for (var i = 0; i < data.length; i++) {
var row = "";
for (var j = 0; j < title.length; j++) {
if(title[j].title){
row += '"' + (data[i][title[j].field] ? data[i][title[j].field] : "") + '"\t,';
}
}
row.slice(0, row.length - 1);
CSV += row + '\r\n';
} if (CSV == '') {
alert("Invalid data");
return;
} var fileName = fileName;
var uri = new Blob(['\ufeff' + CSV], {type:"text/csv"});
var link = document.createElement("a");
link.href = URL.createObjectURL(uri); link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
然而,虽然window.URL.createObjectURL()方法在IE10、 IE11以及Microsoft Edge中能生成的blob:链接,但是却不能把它加到一个<a>节点上,也不能直接在浏览器地址栏打开访问,否则会得到【SCRIPT5:拒绝访问。】错误。甚至,IE9根本不支持调用window.URL.createObjectURL()方法创建Blob URLs。
Microsoft Internet Explorer / Microsoft Edge和高大上的Google Chrome / Mozilla Firefox对于window.URL.createObjectURL()方法创建Blob链接最直观的区别在于得到的blob:链接形式不一样,分别在微软浏览器和标准浏览器中运行new Blob()代码,会得到两种Blob链接形式,第一种为chrome和firefox生成的带有当前域名的标准blob:链接形式,第二种为Microsoft IE和Microsoft Edge生成的不带域名的blob:链接。那么我们就可以通过window.URL.createObjectURL(new Blob()) . indexOf(location.host) < 0表达式来检测是否是IE或早期生成Object URL不带域名的Edge,如果表达式返回true则是IE或Edge旧版本。
事实上,Blob URL不被支持是出于IE浏览器对安全性的考虑(IE浏览器真安全啊,牛逼),然后它自己提供了一套API用来创建或下载Blob文件:msSaveOrOpenBlob。
/**
* 导出excel
* @param {Object} title 标题列key-val
* @param {Object} data 值列key-val
* @param {Object} fileName 文件名称
*/
function JSONToExcelConvertor(title, data, fileName) {
var CSV = '';
var row = ""; for (var i = 0; i < title.length; i++) {
if(title[i].title){
row += title[i].title + ',';
}
}
row = row.slice(0, -1);
CSV += row + '\r\n'; for (var i = 0; i < data.length; i++) {
var row = "";
for (var j = 0; j < title.length; j++) {
if(title[j].title){
row += '"' + (data[i][title[j].field] ? data[i][title[j].field] : "") + '"\t,';
}
}
row.slice(0, row.length - 1);
CSV += row + '\r\n';
} if (CSV == '') {
alert("Invalid data");
return;
} var fileName = fileName;
var uri = new Blob(['\ufeff' + CSV], {type:"text/csv"}); if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
window.navigator.msSaveOrOpenBlob(CSV, fileName + ".csv");
} else { // for Non-IE(chrome、firefox etc.)
var link = document.createElement("a");
link.href = URL.createObjectURL(uri); link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
因此就得出上面最终的代码。
"就算临别也要通电话。"
javascript导出csv文件(excel)的更多相关文章
- mysql导出csv文件excel打开后数字用科学计数法显示且低位变0的解决方法
Excel显示数字时,如果数字大于12位,它会自动转化为科学计数法:如果数字大于15位,它不仅用于科学技术费表示,还会只保留高15位,其他位都变0. Excel打开csv文件时,只要字段值都是数字,它 ...
- thinkphp导出csv文件,用表格输出excel
1.thinkphp导出csv文件 导出csv文件可能就那几行代码,今天有个问题困扰我好久,就是导出之后出现一些html代码,这个不应该,view里面是空的,controller中最后也没有$this ...
- 网页前端导出CSV,Excel格式文件
通过自己实际测试有以下几种方法 方法一通过a标签实现,把要导出的数据用“\n”和“,”拼接成一个字符串,然后把字符串放到href中,这种方法只支持chrome,firefox等非ie浏览器 html页 ...
- PHP 导出 CSV 文件用 Excel 打开出现中文乱码
本篇文章由:http://xinpure.com/php-export-csv-file-opened-by-excel-appear-garbled/ 乱码情况 写了一段导出 CSV 文件的代码,可 ...
- 【转载】JS导出CSV文件
转自:http://www.cnblogs.com/dengnan/p/3990211.html 通过自己实际测试有以下几种方法 方法一通过a标签实现,把要导出的数据用“\n”和“,”拼接成一个字符串 ...
- php使用ajax导出CSV或者EXCEl(thinkphp)方法
首先我强烈推荐看到这篇文章的你将导出文件设置为csv格式的文件 实际测试导出csv文件的速度是excel文件的10几倍左右 首先我先介绍csv文件的导出的方法: 如果你单纯是在数据导出界面上通过用户点 ...
- Web 端 js 导出csv文件(使用a标签)
前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...
- PHP导出CSV文件出现乱码的解决方法
在做项目时碰到使用外语的情况下,我们就会使用UTF-8编码.但是,在用PHP导出CSV文件时,如果写入的数据是使用UTF-8编码的日语.韩语之类的外文,就会出现乱码. 要解决PHP生成CSV文件的乱码 ...
- 导出csv文件数字会自动变科学计数法的解决方法
其实这个问题跟用什么语言导出csv文件没有关系.Excel显示数字时,如果数字大于12位,它会自动转化为科学计数法:如果数字大于15位,它不仅用于科学技术费表示,还会只保留高15位,其他位都变0.解决 ...
随机推荐
- python 3.5学习笔记(第五章)
本章内容 1.什么是模块 2.模块的导入方法 3.搜索路径 4.重要标准库 一.什么是模块 1.模块本质上是一个以.py 结尾的python文件,包含了python对象定义和python语句. 2.模 ...
- 能访问的谷歌 http://209.116.186.231/
能访问的谷歌 http://209.116.186.231/
- 算法学习笔记,几个简单的Demo
算法初学的一些心得 前言:现在工作也快一年多了,有时间下班回家会学学算法,陆陆续续也接触了一些 貌似我知道的就冒泡排序其他的都不是很了解 最近买了一本书,边学边记录吧! 一些常用的方法 暴力破解 下面 ...
- 洛谷P2299 Mzc和体委的争夺战 题解
题目 题目描述 mzc家很有钱(开玩笑),他家有n个男家丁(做过前三弹的都知道).但如此之多的男家丁吸引来了我们的体委(矮胖小伙),他要来与mzc争夺男家丁. mzc很生气,决定与其决斗,但cat的体 ...
- CentOS 7.3 配置静态ip
镜像:CentOS-7-x86_64-DVD-1511.iso 1.修改.查看虚拟机的网段 1.1.查看虚拟机网段 编辑-> 虚拟机网络编辑器,修改的需要管理员权限 选择NAT模式 点击 NAT ...
- 基于surging 的stage组件设计,谈谈我眼中的微服务。
一.前言 随着业务的发展,并发量的增多,业务的复杂度越来越大,对于系统架构能力要求越来越高,这时候微服务的设计思想应运而生,但是对于微服务需要引擎进行驱动,这时候基于.NET CORE 的微服务引擎s ...
- Git初步配置 ubuntu服务器 windows客户端 虚拟机
最近自己配置了一下Git,虽然网上相关的内容满天飞(ps:大多都差不多,很多都是直接转载,说的也比较乱),但是我还是碰到了很多问题,这里我就把我配置的步骤分享一下,遇到的问题也说一下,新手之间相互学习 ...
- 利用TCP协议,实现基于Socket的小聊天程序(初级版)
TCP TCP (Transmission Control Protocol)属于传输层协议.其中TCP提供IP环境下的数据可靠传输,它提供的服务包括数据流传送.可靠性.有效流控.全双工操作和多路复用 ...
- C#中的Contains与IndexOf的区别
C#中要判断一个字符串是否包含另一个字符串,常用的两种方法是 str.Contains和str.IndexOf 这两个方法的区别是: Contains是找指定字符串是否包含一个字串,返回值的bo ...
- php curl问题汇总
0. curl是个什么东西 复制代码代码如下: PHP supports libcurl, a library created by Daniel Stenberg, that allows you ...