这里贴出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)的更多相关文章

  1. mysql导出csv文件excel打开后数字用科学计数法显示且低位变0的解决方法

    Excel显示数字时,如果数字大于12位,它会自动转化为科学计数法:如果数字大于15位,它不仅用于科学技术费表示,还会只保留高15位,其他位都变0. Excel打开csv文件时,只要字段值都是数字,它 ...

  2. thinkphp导出csv文件,用表格输出excel

    1.thinkphp导出csv文件 导出csv文件可能就那几行代码,今天有个问题困扰我好久,就是导出之后出现一些html代码,这个不应该,view里面是空的,controller中最后也没有$this ...

  3. 网页前端导出CSV,Excel格式文件

    通过自己实际测试有以下几种方法 方法一通过a标签实现,把要导出的数据用“\n”和“,”拼接成一个字符串,然后把字符串放到href中,这种方法只支持chrome,firefox等非ie浏览器 html页 ...

  4. PHP 导出 CSV 文件用 Excel 打开出现中文乱码

    本篇文章由:http://xinpure.com/php-export-csv-file-opened-by-excel-appear-garbled/ 乱码情况 写了一段导出 CSV 文件的代码,可 ...

  5. 【转载】JS导出CSV文件

    转自:http://www.cnblogs.com/dengnan/p/3990211.html 通过自己实际测试有以下几种方法 方法一通过a标签实现,把要导出的数据用“\n”和“,”拼接成一个字符串 ...

  6. php使用ajax导出CSV或者EXCEl(thinkphp)方法

    首先我强烈推荐看到这篇文章的你将导出文件设置为csv格式的文件 实际测试导出csv文件的速度是excel文件的10几倍左右 首先我先介绍csv文件的导出的方法: 如果你单纯是在数据导出界面上通过用户点 ...

  7. Web 端 js 导出csv文件(使用a标签)

    前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...

  8. PHP导出CSV文件出现乱码的解决方法

    在做项目时碰到使用外语的情况下,我们就会使用UTF-8编码.但是,在用PHP导出CSV文件时,如果写入的数据是使用UTF-8编码的日语.韩语之类的外文,就会出现乱码. 要解决PHP生成CSV文件的乱码 ...

  9. 导出csv文件数字会自动变科学计数法的解决方法

    其实这个问题跟用什么语言导出csv文件没有关系.Excel显示数字时,如果数字大于12位,它会自动转化为科学计数法:如果数字大于15位,它不仅用于科学技术费表示,还会只保留高15位,其他位都变0.解决 ...

随机推荐

  1. EF简介及CRUD简单DEMO

    一.实体框架(Entity FrameWork)简介 • 简称EF • 与Asp.Net MVC关系与ADO.NET关系 • ADO.NET Entity FrameWork是微软以ADO.NET为基 ...

  2. (转)Vix_API 操作 VMware

    对虚拟机(VMware Workstation)进行程序控制,查询了VMware官方网站的一些内容,但调试的时候还是出现很多问题. 刚开始想通过命令行的方式控制虚拟机,但总是存在一些问题,到现在也没搞 ...

  3. 博弈论基础之sg函数与nim

    在算法竞赛中,博弈论题目往往是以icg.通俗的说就是两人交替操作,每步都各自合法,合法性与选手无关,只与游戏有关.往往我们需要求解在某一个游戏或几个游戏中的某个状态下,先手或后手谁会胜利的问题.就比如 ...

  4. ajax同步与异步 理解

    例如,小明去餐馆排队点餐,前台服务员将小明的菜单告诉厨师进行制作,此时小明后面排队的人就一直等着,直到厨师制作完成,把饭菜送到小明手里后离开,后面的人才能继续点餐:这就是同步处理 但是,如果前台服务员 ...

  5. Python基础之变量,常量,注释,数据类型

    由于上学期学了C语言,对于这一块的内容肯定算熟悉,只是注释的方法有些不同,但得还是一步一步的来!没有基础的同学看了这篇随笔也会大有助益的! 什么是变量?所谓变量就是将一些运算的中间结果暂存到内存中,以 ...

  6. @GetMapping、@PostMapping和@RequestMapping的区别

    @GetMapping 用于将Http Get 请求映射到特定处理程序方法的注释.具体来说就是:@GetMapping是一个作为快捷方式的组合注释 @RequestMapping(method = R ...

  7. java - try catch finally 用法

    try { //执行的代码,其中可能有异常.一旦发现异常,则立即跳到catch执行.否则不会执行catch里面的内容 } catch { //除非try里面执行代码发生了异常,否则这里的代码不会执行 ...

  8. python模块知识一 自定义模块、time、datetime时间模块

    第五章 模块 1.自定义模块: 模块分类: 内置模块(标准库)-- python解释器自带的.py文件(模块) 第三方模块(各种大神写的)-- 需要额外下载(并发编程pypi) 自定义模块(自己写的) ...

  9. 快速清理maven仓库中下载错误的文件

    有时候使用pom文件下载依赖文件的时候突然网络异常,可能会出现依赖文件出现破损,导致怎么都不能使用,也没有重新下载. 之前解决办法是找到出现破损的文件并删除,让其重新下载,但是这样效率很低,也很难找到 ...

  10. Vue事件修饰符详解

    整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ...