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 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
vue中使用腾讯云Im的示例
Oct 23 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
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
js获取域名的方法
2015/01/27 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
小程序实现上下移动切换位置
2019/09/23 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python字符串逐字符或逐词反转方法
2015/05/21 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
简单了解python的内存管理机制
2019/07/08 Python
Python中如何引入第三方模块
2020/05/27 Python
戴森英国官网:Dyson英国
2019/05/07 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
班组长岗位职责范本
2014/01/05 职场文书
小学敬老月活动方案
2014/02/11 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
九年级化学教学反思
2016/02/22 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
SpringBoot生成License的实现示例
2021/06/16 Java/Android