首页 > 语言 > JavaScript > 正文

javascript导出csv文件(excel)的方法示例

2024-05-06 15:35:31
字体:
来源:转载
供稿:网友

这里贴出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对于

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选