Search code examples
javascriptexcelhtml-tabledingbats

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

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)

&#x2714;->✔ &#x2718->✘

Solution

  • 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/