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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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编程效率 引入缓存机制提升性能
2010/02/15 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
zend framework重定向方法小结
2016/05/28 PHP
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
pyhton列表转换为数组的实例
2018/04/04 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
2014婚礼司仪主持词
2014/03/14 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
户外活动总结范文
2014/04/30 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
子女赡养老人协议书
2016/03/23 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
python 安全地删除列表元素的方法
2022/03/16 Python
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技