javascript导出csv文件（excel）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript导出csv文件（excel），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4266字，纯文字阅读大概需要7分钟。

内容图文

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

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

"就算临别也要通电话。"

内容总结

以上是互联网集市为您收集整理的javascript导出csv文件（excel）全部内容，希望文章能够帮你解决javascript导出csv文件（excel）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端