javascript导出csv文件(excel)的方法示例


Posted in Javascript onAugust 25, 2019

这里贴出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 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
在pycharm中开发vue的方法步骤
Mar 04 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 #Javascript
angularjs自定义过滤器demo示例
Aug 24 #Javascript
Jquery实现获取子元素的方法分析
Aug 24 #jQuery
微信小程序class封装http代码实例
Aug 24 #Javascript
微信小程序前端promise封装代码实例
Aug 24 #Javascript
node获取客户端ip功能简单示例
Aug 24 #Javascript
js针对图片加载失败的处理方法分析
Aug 24 #Javascript
You might like
PHP5 面向对象程序设计
2008/02/13 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python实现字典的key和values的交换
2015/08/04 Python
python3操作mysql数据库的方法
2017/06/23 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
Python日期时间Time模块实例详解
2019/04/15 Python
学生生病请假条范文
2014/02/16 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
学生鉴定评语大全
2014/05/05 职场文书
民生工作实施方案
2014/05/31 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
单位委托书怎么写
2014/09/21 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
销售助理岗位职责
2015/02/11 职场文书
班委竞选稿范文
2015/11/21 职场文书
表扬信范文
2019/04/22 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle