您的位置: 首页  >  技术问答  >  将html表导出为CSV无法使用javascript工作

将html表导出为CSV无法使用javascript工作

分类: 技术问答 • 2022-03-27 17:07:15

将html表导出为CSV无法使用javascript工作

问题描述：





我使用javascript代码将我的html表导出到csv，使用锚标记中的download属性。我检查了兼容性，它与我的谷歌浏览器版本兼容。但是当我将表下载到csv时，它不会向我显示表中的数据，而是显示页面的html标记和脚本。对此有何想法？我正在使用这个javascript代码



Hi,

I used a javascript code to export my html table to csv, using the download attribute in the anchor tag. I checked the compatibility and it is compatible with the version of my google chrome. But when I download the tables to csv, it does not show me the data in the table, but the html tags and scripts of the page. Any idea about this? I am using this javascript code

/**
 * ExcellentExport.
 * A client side Javascript export to Excel.
 *
 * @author: Jordi Burgos (jordiburgos@gmail.com)
 *
 * Based on:
 * https://gist.github.com/insin/1031969
 * http://jsfiddle.net/insin/cmewv/
 *
 * CSV: http://en.wikipedia.org/wiki/Comma-separated_values
 */

/*
 * Base64 encoder/decoder from: http://jsperf.com/base64-optimized
 */


var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
var fromCharCode = String.fromCharCode;
var INVALID_CHARACTER_ERR = ( function() {
        // fabricate a suitable error object
        try {
            document.createElement('$');
        } catch (error) {
            return error;
        }
    }());

// encoder
window.btoa || (window.btoa = function(string) {
    var a, b, b1, b2, b3, b4, c, i = 0, len = string.length, max = Math.max, result = '';

    while (i < len) {
        a = string.charCodeAt(i++) || 0;
        b = string.charCodeAt(i++) || 0;
        c = string.charCodeAt(i++) || 0;

        if (max(a, b, c) > 0xFF) {
            throw INVALID_CHARACTER_ERR;
        }

        b1 = (a >> 2) & 0x3F;
        b2 = ((a & 0x3) << 4) | ((b >> 4) & 0xF);
        b3 = ((b & 0xF) << 2) | ((c >> 6) & 0x3);
        b4 = c & 0x3F;

        if (!b) {
            b3 = b4 = 64;
        } else if (!c) {
            b4 = 64;
        }
        result += characters.charAt(b1) + characters.charAt(b2) + characters.charAt(b3) + characters.charAt(b4);
    }
    return result;
});

// decoder
window.atob || (window.atob = function(string) {
    string = string.replace(/=+$/, '');
    var a, b, b1, b2, b3, b4, c, i = 0, len = string.length, chars = [];

    if (len % 4 === 1)
        throw INVALID_CHARACTER_ERR;

    while (i < len) {
        b1 = characters.indexOf(string.charAt(i++));
        b2 = characters.indexOf(string.charAt(i++));
        b3 = characters.indexOf(string.charAt(i++));
        b4 = characters.indexOf(string.charAt(i++));

        a = ((b1 & 0x3F) << 2) | ((b2 >> 4) & 0x3);
        b = ((b2 & 0xF) << 4) | ((b3 >> 2) & 0xF);
        c = ((b3 & 0x3) << 6) | (b4 & 0x3F);

        chars.push(fromCharCode(a));
        b && chars.push(fromCharCode(b));
        c && chars.push(fromCharCode(c));
    }
    return chars.join('');
});


ExcellentExport = (function() {
    var version = "1.3";
    var uri = {excel: 'data:application/vnd.ms-excel;base64,', csv: 'data:application/csv;base64,'};
    var template = {excel: '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'};
    var base64 = function(s) {
        return window.btoa(unescape(encodeURIComponent(s)));
    };
    var format = function(s, c) {
        return s.replace(/{(\w+)}/g, function(m, p) {
            return c[p];
        });
    };

    var get = function(element) {
        if (!element.nodeType) {
            return document.getElementById(element);
        }
        return element;
    };

    var fixCSVField = function(value) {
        var fixedValue = value;
        var addQuotes = (value.indexOf(',') !== -1) || (value.indexOf('\r') !== -1) || (value.indexOf('\n') !== -1);
        var replaceDoubleQuotes = (value.indexOf('"') !== -1);

        if (replaceDoubleQuotes) {
            fixedValue = fixedValue.replace(/"/g, '""');
        }
        if (addQuotes || replaceDoubleQuotes) {
            fixedValue = '"' + fixedValue + '"';
        }
        return fixedValue;
    };

    var tableToCSV = function(table) {
        var data = "";
        for (var i = 0, row; row = table.rows[i]; i++) {
            for (var j = 0, col; col = row.cells[j]; j++) {
                alert(data);
                data = data + (j ? ',' : '') + fixCSVField(col.innerHTML);
            }
            data = data + "\r\n";
        }
        return data;
    };

    var ee = {
        /** @expose */
        excel: function(anchor, table, name) {
            table = get(table);
            var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};
            var hrefvalue = uri.excel + base64(format(template.excel, ctx));
            anchor.href = hrefvalue;
            // Return true to allow the link to work
            return true;
        },
        /** @expose */
       /* csv: function(anchor, table) {
            table = get(table);
            var csvData = tableToCSV(table);
            var hrefvalue = uri.csv + base64(csvData);
            //anchor.href = hrefvalue;
            return true;
        }*/
        csv: function(table) {
            table = get(table);
            var csvData = tableToCSV(table);
            var hrefvalue = uri.csv + base64(csvData);
            //anchor.href = hrefvalue;
            return true;
        }
    };

    return ee;
}());

答

'）;
} catch （错误）{
return 错误;
}
}（））;

// 编码器
window.btoa || （window.btoa = function（ string ）{
var a，b，b1，b2 ，b3，b4，c，i = 0 ，len = string .length，max = Math.max ，result = ' ';

while （i < len）{
a = string .charCodeAt （i ++）|| 0 ;
b = string .charCodeAt（i ++）|| 0 ;
c = string .charCodeAt（i ++）|| 0 ;

if （max（a，b，c）> ; 0xFF）{
throw INVALID_CHARACTER_ERR;
}

b1 =（a>> 2 ）& 0x3F的;
b2 =（（a& 0x3）<< 4 ）| （（b>> 4 ）& 0xF）;
b3 =（（b& 0xF）<< 2 ）| （（c>> 6 ）& 0x3）;
b4 = c& 0x3F的;

if （！b）{
b3 = b4 = 64 ;
} 其他 如果（！c）{
b4 = 64 跨度>;
}
结果+ = characters.charAt（b1）+ characters.charAt（b2）+ characters.charAt（b3）+ characters.charAt（b4）;
}
返回结果;
}）;

// decoder
window.atob || （window.atob = function（ string ）{
string = string .replace（/ = +
'); } catch (error) { return error; } }()); // encoder window.btoa || (window.btoa = function(string) { var a, b, b1, b2, b3, b4, c, i = 0, len = string.length, max = Math.max, result = ''; while (i < len) { a = string.charCodeAt(i++) || 0; b = string.charCodeAt(i++) || 0; c = string.charCodeAt(i++) || 0; if (max(a, b, c) > 0xFF) { throw INVALID_CHARACTER_ERR; } b1 = (a >> 2) & 0x3F; b2 = ((a & 0x3) << 4) | ((b >> 4) & 0xF); b3 = ((b & 0xF) << 2) | ((c >> 6) & 0x3); b4 = c & 0x3F; if (!b) { b3 = b4 = 64; } else if (!c) { b4 = 64; } result += characters.charAt(b1) + characters.charAt(b2) + characters.charAt(b3) + characters.charAt(b4); } return result; }); // decoder window.atob || (window.atob = function(string) { string = string.replace(/=+


/，' '）;
var a，b，b1，b2，b3，b4，c，i = 0 ，len = 字符串 .length，chars = [];

if （len％ 4 === 1 ）
throw INVALID_CHARACTER_ERR;

while （i < len）{
b1 = characters.indexOf（ string .charAt（i ++））;
b2 = characters .indexOf（ string .charAt（i ++））;
b3 = characters.indexOf（串跨度> .charAt（I ++））;
b4 = characters.indexOf（ string .charAt（i ++））;

a =（（b1& 0x3F）<< 2 ）| （（b2>> 4 ）& 0x3）;
b =（（b2& 0xF）<< 4 ）| （（b3>>> 2 ）& 0xF）;
c =（（b3& 0x3）<< 6 ）| （b4& 0x3F）;

chars.push（fromCharCode（a））;
b&& chars.push（fromCharCode（B））;
c&& chars.push（fromCharCode（C））;
}
return chars。 join （' '）;
}）;


ExcellentExport =（function（）{
var version = 1.3;
var uri = {excel： data：application / vnd.ms-excel; base64，'，csv：' data：application / csv; base64，'};
var template = {excel：' < html xmlns：o =urn：schemas-microsoft-com：office：office xmlns：x =urn：schemas-microsoft-com：office：excelxmlns =http://www.w3.org/TR/REC-html40>< head>< meta http-equiv = Content-Typecontent =text / html; charset = UTF-8><！ - [if gte mso 9]>< xml>< x：ExcelWorkbook>< x：ExcelWorksheets>< X：ExcelWorksheet&GT;&LT; X：名称> {工作表}&LT; / X：名称>&LT; X：WorksheetOptions&GT;&LT; X：显示网格线/&GT;&LT; / X：WorksheetOptions&GT;&LT; / X：ExcelWorksheet&GT;&LT; / X：ExcelWorksheets&GT;&LT; / X：ExcelWorkbook&GT;&LT; / XML&GT;&LT; ENDIF] - GT;&LT; /头&GT;&LT;主体&GT;&LT;表> {表}&LT; /表>&LT; / BODY&GT;&LT; / HTML&GT;'跨度>};
var base64 = function（s）{
return window.btoa（unescape （encodeURIComponent方法（一个或多个）））;
};
var format = function（s，c）{
return s.replace （/ {（\w +）} / g，function（m，p）{
return c [p];
}）;
};

var get = function（element）{
if （！element.nodeType）{
return document.getElementById（element）;
}
return 元素;
};

var fixCSVField = function（ value ）{
var fixedValue = value ;
var addQuotes =（ value .indexOf（ ' ，'）！== -1）|| （ value .indexOf（' \ r'）！== -1）|| （ value .indexOf（' \ n'）！== -1）;
var replaceDoubleQuotes =（ value .indexOf（ ' '）！== -1）;

if （replaceDoubleQuotes）{
fixedValue = fixedValue.replace（/ / g，' '）;
}
if（addQuotes || replaceDoubleQuotes）{
fixedValue =' ' + fixedValue +' ';
}
返回fixedValue;
};

var tableToCSV = function（table）{
var data = ;
for（var i = 0，row; row = table.rows [i]; i ++）{
for（var j = 0，col; col = row.cells [j]; j ++）{
alert（data）;
data = data +（j？'，'：''）+ fixCSVField（col.innerHTML）;
}
data = data + \\\\ n ;
}
返回数据;
};

var ee = {
/ ** @expose * /
excel：function（anchor，table，name）{
table = get（table）;
var ctx = {工作表：名称|| '工作表'，表：table.innerHTML};
var hrefvalue = uri.excel + base64（format（template.excel，ctx））;
anchor.href = hrefvalue;
//返回true以允许链接工作
返回true;
}，
/ ** @expose * /
/ * csv：function（anchor，table）{
table = get（table）;
var csvData = tableToCSV（table）;
var hrefvalue = uri.csv + base64（csvData）;
//anchor.href = hrefvalue;
返回true;
} * /
csv：function（table）{
table = get（table）;
var csvData = tableToCSV（table）;
var hrefvalue = uri.csv + base64（csvData）;
//anchor.href = hrefvalue;
返回true;
}
};

返回ee;
}（））;
/, ''); var a, b, b1, b2, b3, b4, c, i = 0, len = string.length, chars = []; if (len % 4 === 1) throw INVALID_CHARACTER_ERR; while (i < len) { b1 = characters.indexOf(string.charAt(i++)); b2 = characters.indexOf(string.charAt(i++)); b3 = characters.indexOf(string.charAt(i++)); b4 = characters.indexOf(string.charAt(i++)); a = ((b1 & 0x3F) << 2) | ((b2 >> 4) & 0x3); b = ((b2 & 0xF) << 4) | ((b3 >> 2) & 0xF); c = ((b3 & 0x3) << 6) | (b4 & 0x3F); chars.push(fromCharCode(a)); b && chars.push(fromCharCode(b)); c && chars.push(fromCharCode(c)); } return chars.join(''); }); ExcellentExport = (function() { var version = "1.3"; var uri = {excel: 'data:application/vnd.ms-excel;base64,', csv: 'data:application/csv;base64,'}; var template = {excel: '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'}; var base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))); }; var format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }); }; var get = function(element) { if (!element.nodeType) { return document.getElementById(element); } return element; }; var fixCSVField = function(value) { var fixedValue = value; var addQuotes = (value.indexOf(',') !== -1) || (value.indexOf('\r') !== -1) || (value.indexOf('\n') !== -1); var replaceDoubleQuotes = (value.indexOf('"') !== -1); if (replaceDoubleQuotes) { fixedValue = fixedValue.replace(/"/g, '""'); } if (addQuotes || replaceDoubleQuotes) { fixedValue = '"' + fixedValue + '"'; } return fixedValue; }; var tableToCSV = function(table) { var data = ""; for (var i = 0, row; row = table.rows[i]; i++) { for (var j = 0, col; col = row.cells[j]; j++) { alert(data); data = data + (j ? ',' : '') + fixCSVField(col.innerHTML); } data = data + "\r\n"; } return data; }; var ee = { /** @expose */ excel: function(anchor, table, name) { table = get(table); var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}; var hrefvalue = uri.excel + base64(format(template.excel, ctx)); anchor.href = hrefvalue; // Return true to allow the link to work return true; }, /** @expose */ /* csv: function(anchor, table) { table = get(table); var csvData = tableToCSV(table); var hrefvalue = uri.csv + base64(csvData); //anchor.href = hrefvalue; return true; }*/ csv: function(table) { table = get(table); var csvData = tableToCSV(table); var hrefvalue = uri.csv + base64(csvData); //anchor.href = hrefvalue; return true; } }; return ee; }());


请参阅此jsfiddle示例。这是有效的。



http://jsfiddle.net/KPEGU/2017 / [ ^ ]
See this jsfiddle example. This is working.

http://jsfiddle.net/KPEGU/2017/[^]


相关推荐