Unicode UTF-8 Dingbats are broken when a few but fine too many

Question

Hello I'm trying to convert my html table to excel. And everything is fine except in excel, the dingbats are fine when there are 20 or more but are broken when there are less..

Here's my javascript :

 $("#btnExport").click(function (e) {
    var uri = 'data:application/vnd.ms-excel;base64,'
 , template = '<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><!--[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>'
 , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
 , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }


    table = document.getElementById('table')
    var ctx = { worksheet: 'Table1' , table: table.innerHTML }

    var a = document.createElement('a');
    a.href = uri + base64(format(template, ctx))

    a.download = 'Excel.xls';
    a.click();
    e.preventDefault();
});

screenshots:

Works fine:

enter image description here

Broken:

enter image description here

the dingbats' values:(You can see it from here)

✔->✔ &#x2718->✘

score 0 · Accepted Answer · answered Jun 23 '15 at 11:34

Sure that this will work at all without appending the created A element somewhere?

But however, for supporting UFT-8 you should add <meta charset="UTF-8"> into the head of your template.

 $("#btnExport").click(function (e) {
    var uri = 'data:application/vnd.ms-excel;base64,'
 , template = '<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 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>'
 , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
 , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }


    table = document.getElementById('table')
    var ctx = { worksheet: 'Table1' , table: table.innerHTML }

    var a = document.createElement('a');
    a.href = uri + base64(format(template, ctx))

    a.download = 'Excel.xls';

    $("body").append(a);

    a.click();
    e.preventDefault();
});

See fiddle: https://jsfiddle.net/r5p6rmtb/

Exactly! That's the way it is. – sertsedat Jun 23 '15 at 15:48 — sertsedat, Jun 23 '15 at 15:48

Unicode UTF-8 Dingbats are broken when a few but fine too many

1 Answers1