1

I am doing an export to CSV functionality on my website. The data are in spanish so there will be alot of accented characters in there, and one example of this problem is the header "Año" (year) but on excel it shows as "Año".

Here is my export code using javascript:

HTML

<a href="#" class="btn" id="export-btn"> Export</a>
<a href="#" class="btn" id="download" style="display:none"> Download Now </a>

JS

$(document).on('click', '#export-btn', function(e) {

    var _this = $(this);
    _this.attr('disabled',true);

    var datenow = new Date();
        datenow = datenow.getTime();

    var exportdata = ConvertToCSV(exportdata);

    $('#download').attr("href", "data:text/csv;charset=utf8," + encodeURIComponent(exportdata) );
    $('#download').attr("download", "InTrack-Report-"+datenow+".csv");

    $('#download').show(); //show download button

    _this.attr('disabled',false);

});

here is the ConvertToCSV function, I added sep=; to make excel recognize the semicolon as delimiters.

function ConvertToCSV(objArray) {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = 'sep=;\r\n'; //tell excel that we used semicolon as separator

    //header
    var line = '';
    for (var i = 0; i < array.Fields.length; i++) {
        if (line != '') line += ';'
        line += array.Fields[i]['Title'];
    }
    str += line + '\r\n';

    //rows
    for (var i = 0; i < array.Rows.length; i++) {
        var line = '';
        for (var index in array.Rows[i]) {
            if (line != '') line += ';'

            line += array.Rows[i][index];
        }

        str += line + '\r\n';
    }

    return str;
}

UPDATE: I found a way to display the accented letters properly by following the solution here. But I had to remove the sep=; which is important as it separates my data by semicolon. Is there a way to add both the BOM and the sep=; at the top? If so, how? Because it seems like I can only use one.

So instead of str='sep=;\r\n' it is now str='\uFEFF sep=;\r\n'
Community
  • 1
  • 1
clintgh
  • 2,039
  • 3
  • 28
  • 44
  • you must make sure your text file gets saved in unicode and not in utf8 – Tschallacka Jun 16 '15 at 12:56
  • ok, how do I do that? – clintgh Jun 16 '15 at 13:00
  • Do you provide them with the file as download or just in browser and they copy and paste? If they copy and paste you might have some success by putting your doctype/charset into unicode. If you do a download present them with a zipped downloadable textfile in unicode format. For example `"data:text/csv;charset=utf8,"` should not be utf8 but unicode – Tschallacka Jun 16 '15 at 13:05
  • I provide them a link button which will download the file thru `href=data:text/csv;charset=utf8,{uriencoded data here}`. I will try to change utf8 to unicode now – clintgh Jun 16 '15 at 13:07
  • No changing to `charset=unicode` did not work – clintgh Jun 16 '15 at 13:21

2 Answers2

3

if you get an error with the ASCII in the creation of file.csv, try adding the BOM first.

var BOM = "\uFEFF"; 
return BOM + str;

and then crate the file headers with the data: "text/csv;charset=utf-8" instead of utf8 (without - )

Marcelo Lujan
  • 2,142
  • 1
  • 17
  • 12
0

Use escape at place of encodeURI and add "sep=;\n" before string and allow it to escape as well

Sample code

var csvString =  "sep=;\n" + csvRows.join("\n");
var a         = document.createElement('a');
a.href        = 'data:attachment/csv;charset=UTF-8,%EF%BB%BF' + escape(csvString);
L. GARG
  • 1