脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript导出csv文件（excel）

javascript导出csv文件（excel）的方法示例

 更新时间：2019年08月25日 10:29:44   作者：杨冠标  
这篇文章主要给大家介绍了关于javascript导出csv文件（excel）的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

这里贴出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是如何影响DOM树构建的

    详细聊聊JavaScript是如何影响DOM树构建的

    DOM (Document Object Model) 的全称是文档对象模型,它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构,这篇文章主要给大家介绍了关于JavaScript是如何影响DOM树构建的相关资料,需要的朋友可以参考下
    2021-08-08
  • BootStrap 获得轮播中的索引和当前活动的焦点对象

    BootStrap 获得轮播中的索引和当前活动的焦点对象

    这篇文章主要介绍了BootStrap 获得轮播中的索引和当前活动的焦点对象,本文给大家介绍的非常详细，需要的朋友可以参考下
    2017-05-05
  • js DOM模型操作

    js DOM模型操作

    文档对象模型DOM（Document Object Module）定义了用户操作文档对象的接口，它使得用户对HTML有了空前的访问能力，并使开发者能将HTML作为XML文档来处理。
    2009-12-12
  • 微信小程序绘制半圆（弧形）进度条

    微信小程序绘制半圆（弧形）进度条

    这篇文章主要为大家详细介绍了微信小程序绘制半圆（弧形）进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js+canvas实现图片格式webp/png/jpeg在线转换

    js+canvas实现图片格式webp/png/jpeg在线转换

    这篇文章主要介绍了js+canvas实现图片格式webp/png/jpeg在线转换,需要的朋友可以参考下
    2020-08-08
  • 微信小程序服务器日期格式化问题

    微信小程序服务器日期格式化问题

    一般服务器获取到日期都是中国标准时间，需要对其进行格式化,这篇文章主要介绍了微信小程序服务器日期格式化问题，需要的朋友可以参考下
    2020-01-01
  • 详解ant-design-pro使用qiankun微服务

    详解ant-design-pro使用qiankun微服务

    这篇文章主要介绍了ant-design-pro使用qiankun微服务详解,其实微服务需要有主应用和子应用， 一个子应用可以配置多个相关联的主应用,配置方法都是一样的，对ant-design-pro微服务配置相关知识，感兴趣的朋友一起看看吧
    2022-03-03
  • js带按钮的提示框可供选择示例代码

    js带按钮的提示框可供选择示例代码

    本文为大家介绍下使用js实现可以供选择的弹出框，具体的实现如下，感性的朋友可以参考下，希望对大家学习有所帮助
    2013-09-09
  • 纯js实现轮播图效果

    纯js实现轮播图效果

    这篇文章主要为大家详细介绍了纯js实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • uni-file-picker文件选择上传功能实现代码

    uni-file-picker文件选择上传功能实现代码

    本文介绍了uni-file-picker的基础使用方法,包括选择图片的九宫格样式、限制选择的图片数量、指定图片类型及后缀,以及如何自定义上传时机,详细说明了如何通过设置不同的属性来实现图片的选择和上传,适用于需要在应用中上传图片的开发者
    2024-09-09

最新评论