189 8069 5689
这篇文章给大家介绍怎么在javascript中导出csv文件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
专注于为中小企业提供网站制作、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业佛山免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了数千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
/**
* 导出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:链接，但是却不能把它加到一个节点上，也不能直接在浏览器地址栏打开访问，否则会得到【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);
}
}关于怎么在javascript中导出csv文件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。