JavaScript导出CSV文件（Excel）的方法示例

作者：函数茶馆时间：2026-10-23 10:25:21浏览：598

本文介绍利用JavaScript导出CSV文件的方法。针对数据量大导致浏览器URL长度限制的问题，通过Blob对象和window.URL.createObjectURL()生成客户端链接。重点解析IE及Edge旧版本对Blob URL的安全限制，提供msSaveOrOpenBlob兼容方案，实现跨浏览器稳定导出。

JavaScript导出CSV文件基础代码

这里提供一段用于将数据导出为CSV文件（可被Excel打开）的JavaScript代码。


/**
 * 导出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);
}

上述写法在处理大量数据时，可能因浏览器对URL长度有限制而导致导出失败。为此，需要引入Blob对象并结合window.URL.createObjectURL()方法进行优化。

通过window.URL.createObjectURL()方法可以直接生成以blob:开头的链接。该链接在浏览器端生成，不会占用服务器资源。

解决URL长度限制：Blob与createObjectURL方案


/**
 * 导出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>节点的href属性，也不能在浏览器地址栏中直接访问，否则可能触发【SCRIPT5：拒绝访问】错误。此外，IE9根本不支持调用window.URL.createObjectURL()方法创建Blob URLs。

Microsoft Internet Explorer、Microsoft Edge与Google Chrome、Mozilla Firefox在window.URL.createObjectURL()方法创建Blob链接时存在直观差异。在Chrome和Firefox中运行new Blob()会生成带有当前域名的标准blob:链接；而在IE和旧版Edge中，生成的blob:链接则不带域名。可以通过window.URL.createObjectURL(new Blob()) . indexOf(location.host) < 0表达式来检测是否为IE或早期生成Object URL不带域名的Edge，若表达式返回true，则表明当前环境为IE或旧版Edge。

实际上，Blob URL在IE中不受支持是出于安全考虑（IE浏览器在此方面较为严格）。针对这一情况，IE提供了一套专用API：msSaveOrOpenBlob，用于创建或下载Blob文件。

IE与Edge兼容性处理及最终实现


/**
 * 导出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);
 }
}

基于上述分析，最终整合出兼容各浏览器的完整代码。

总结

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对本站的支持。

作者最新文章

JS split切割后出现空字符串怎么过滤

2026-11-05 16:00:30

在 React 或 Vue 项目中封装使用 JS 节流防抖

2026-11-05 15:27:29

JavaScript中怎么将带小数的字符串转为整数？

2026-11-05 14:32:38

怎么用JavaScript策略模式重构电商促销计算逻辑？

2026-11-05 14:01:09

JS使用constructor判断数据类型可靠吗

2026-11-05 13:49:41