当前位置： 移动技术网 > IT编程>开发语言>JavaScript > javascript导出csv文件（excel）的方法示例

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

2019年09月07日  | 移动技术网IT编程  | 我要评论

这里贴出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);
 }
}

因此就得出上面最终的代码。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对移动技术网的支持。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网