js native export excel and csv

In the strict sense is not really excel file, but you can use excel to open to see it, in fact, the format is a comma-delimited file that is csv file.
Here are a few pit to say about:

  1. Unicode utf8 without the logo head open excel files garbled.
  2. Added Unicode utf8 head of identity may result when the file is read encountered an illegal character.
  3. IE does not support a download attribute tag.
  4. Here is the URL encoding, and can also use the base64 blob.

Unicode head logo:

EC BB BF UTF-8
FF FE UTF-16 aka UCS-2, little endian
FE FF UTF-16 aka UCS-2, big endian
00 00 FF FE UTF-32 aka UCS-4, little endian.
0:00 FE FF UTF-32 aka UCS-4, big-endian.

/*
data = {
    thead : ["第一列", "第二列", "第三列"],
    tbody : [
        ["1", "2", "3"],
        ["4", "5", "6"],
    ]
}*/
/**
 * 导出excel和csv
 * @param data 要导出的数据,需要是上面的数据格式,当然也可以重写这个方法自己定义数据格式
 * @param name 文件名
 * @param type 文件类型 xls或csv
 * @returns
 */
function exportData(data, name, type) {
    var dataStr = "";
    //Unicode头部标识
    var utf8Head = "%EF%BB%BF";
    //uri文件资源类型
    var csvUri = "data:text/csv;charset=utf-8,";
    var xlsUri = "data:application/vnd.ms-excel;charset=utf-8,";
    //创建一个a标签,用来下载
    var oa = document.createElement("a");
    var col = data.thead.length;
    var row = data.tbody.length;
    
    //数据构造
    for(var i = 0; i < col; i++) {
        dataStr += data.thead[i];
        if(i < col - 1)
            dataStr += ","
    }
    dataStr += "\n";
    
    for(var i = 0; i < row; i++) {
        for(var j = 0; j < col; j++) {
            dataStr += data.tbody[i][j];
            if(j < col - 1)
                dataStr += ",";
        }
        dataStr += "\n";
    }
    if(type === "csv") {
        //拼接编码,用url编码就可以,layui就是这种方式
        oa.href = csvUri + utf8Head + encodeURIComponent(dataStr);
        oa.download = name + ".csv";
    } else if(type === "xls") {
        oa.href = xlsUri + utf8Head + encodeURIComponent(dataStr);
        oa.download = name + ".xls";
    } else {
        return false;
    }
    //触发链接点击事件进行下载
    oa.click();
}

Guess you like

Origin www.cnblogs.com/Vaxy/p/11911470.html