如何用JavaScript将数据导出为CSV文件实现Excel兼容性？

本文共计975个文字，预计阅读时间需要4分钟。

以下是对原文的简化改写，确保不超过100字，不使用数字：

javascript输出CSV（Excel）文件的JavaScript代码。** 导出Excel@param {Object} title 列@param {Object} data 数据列@param {Object} fileName 文件名**/function JSONToExcelConvertor(title, data, fileName) { // 代码实现}

这里贴出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>节点上，也不能直接在浏览器地址栏打开访问，否则会得到错误。甚至，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); } }

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

总结

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