1. 程式人生 > >javascript匯出csv檔案(excel)

javascript匯出csv檔案(excel)

這裡貼出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);
    }
}

因此就得出上面最終的程式碼。

 

"就算臨別也要通電話