JavaScript

超轻量级php框架startmvc

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

更新时间:2020-09-08 20:18:01 作者:startmvc
这里贴出JavaScript导出csv文件(excel)的代码。/***导出excel*@param{Object}title标题列key-val*@param{O

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

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

总结

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

js 导出excel js表格导出 js导出csv文件