Search code examples
javascriptangularjsexcelcsvurl-encoding

Angular download csv file international characters


Hi I am generating a CSV file based on some filtered data in my angular web app.

The input I am sending to my csvString is: Torup Bakkegård (Middelfartvej 105); Coop Brøndby; (Holkebjergvej 54);

The output is always ruined once i open the excel file: TorupBakkegård(Middelfartvej105) CoopBrøndby(Holkebjergvej54)

However when I open it with notepad it's fine, so it's just MS Excel(using the latest version) that seems to ruin it. TorupBakkegård(Middelfartvej105);CoopBrøndby(Holkebjergvej54);

I tried with several encodings, it seems excel simply does not care Here is the code javascript:

vm.downloadExcel = function (bookings) {
    var csvRows = [];
    var csvHeading = "Afhentningsadresse;Modtager";

    csvRows.push(csvHeading + "\n");
    for (var i = 0; i < bookings.length; i++) {
        var csvRow = "";
        csvRow += bookings[i].pickupAddress + ";";
        csvRow += bookings[i].customerAddress + ";";
        csvRows.push(csvRow + "\n");
    }
    var csvString = csvRows.join("%0A");
    var a = document.createElement('a');

    a.href = 'data:application/csv;charset=Windows-1252,' + csvString;
    a.target = '_blank';
    a.download = 'myFile.csv';

    console.log(a.href);
    document.body.appendChild(a);
    a.click();

Solution

  • After a bit of research we figured out that we didn't mention the BOM.

    The BOM is responsible for the encoding in the actual file. So after changing:

    a.href = 'data:application/csv;charset=Windows-1252,' + csvString;
    

    With:

        a.href = 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURI(csvString);
    

    Everything works just fine.

    Credits goes to: Gergő Nagy, for answering: Javascript to csv export encoding issue