视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascript导出csv文件(excel)的方法示例
2020-11-27 21:51:50 责编:小采
文档

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

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

总结

下载本文
显示全文
专题