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 相关文章推荐
jquery tab插件制作实现代码
Jun 22 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 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创建基本身份认证站点的方法详解
2013/06/08 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
python创建临时文件夹的方法
2015/07/06 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
浅谈python中get pass用法
2019/03/19 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
如何在Shell脚本中使用函数
2015/09/06 面试题
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
城管综合整治方案
2014/05/01 职场文书
本溪关门山导游词
2015/02/09 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
一文弄懂MySQL索引创建原则
2022/02/28 MySQL