Download BLOB content using specified charset

Question

Is possible to change the Blob charset really? I'm trying it for hours but it doesn't workds. See this.

jQuery("#download").click(function() {
    var csv_content = jQuery("#csv").val(),
        download = document.createElement("a"),
        blob = new Blob([csv_content], { type: "text/csv;charset=ISO-8859-1" });

    download.href = window.URL.createObjectURL(blob);
    download.download = "test.csv";

    var event = document.createEvent("MouseEvents");
    event.initMouseEvent(
        "click", true, false, window, 0, 0, 0, 0, 0
        , false, false, false, false, 0, null
    );
    download.dispatchEvent(event);    
});

I need export a CSV to open on Excel, but it always is save with UTF-8 and Excel can't handle it.

score 169 · Accepted Answer · edited May 23 '17 at 11:54

169

I found the solution before to post.

The change of charset has not been resolved, in fact. However, I sent the UTF-8 header for the download process and Excel was able to understand the file format correctly. Thanks to this response of Erik Töyrä.

blob = new Blob(["\ufeff", csv_content]);

edited May 23 '17 at 11:54

Community

1
1

answered Sep 20 '13 at 20:20

David Rodrigues

12,041
16
62
90

14

Adding `"\ufeff"` at the beginning really made it work! – Kayhadrin May 20 '15 at 11:44
3

I suspect this works for you because ISO-8859-1 is a subset of UTF-8, so although the browser returns UTF-8, the prefix you added allows Excel to work out what to do. However, in my case the content is Shift-JIS, which is not compatible with UTF-8 so returning the content re-encoded in UTF-8 is not an option. – Adam Millerchip Apr 26 '16 at 07:54
1

That did the trick also for me! In my case, what is represented here by the "csv_content" variable, was an array of strings. So I just did it like so: ["\ufeff", ...str_arr]. Obviously, the spread operation in JS didn't even exist at the time this question was submitted (and answered), but today it does and it's very useful. – TheCuBeMan Feb 11 '20 at 10:30

score 11 · Answer 2 · edited May 23 '17 at 12:26

In my case I was using Angular JS to receive an encoded CSV file from the server in response to an HTTP POST. The problem was that CSVs returned from XMLHttpRequests are represented as Unicode (I want to say UTF-8, but according to this it is UTF-16) strings, not pre-encoded binary data. It looks like this is true in your example too, it is reading the CSV from a DOM element? In this case it ends up being represented as Unicode in memory, so it doesn't matter what value you set the encoding metadata to, the data is still Unicode.

My Angular code was doing something like this:

$http.post('/url', postData, {}).then(handleResponse);

Inside handleResponse, the data was already represented in Unicode. According to Angular's $http service, not providing the responseType property on the config object causes it to default to string. Which according to Mozilla ends up represented as a DOMString in UTF-16, whereas we actually want it to be a Blob. Setting the responseType to blob on the config object successfully prevented the content from getting decoded. Without this, the response data was being inadvertently decoded before being placed into the Blob.

$http.post('/url', postData, {responseType: 'blob'}).then(handleResponse);

I then used saveAs() to get the browser to provide the file contents to the user.

function handleResponse(response) {
    let headers = response.headers();
    let blob = new Blob([response.data], {type: headers['content-type']});
    saveAs(blob, headers['x-filename']);
}

I got the idea to set responseType from https://stackoverflow.com/a/16791296/1225617

Glad to help, and glad that replying to a three year old accepted answer question helped out someone else so quickly. — Adam Millerchip, Apr 28 '16 at 07:45

score 3 · Answer 3 · answered May 21 '20 at 07:08

  const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) { // IE 10+
      navigator.msSaveBlob(blob, filename);
    } else {
      const link = document.createElement('a');
      if (link.download !== undefined) {
        // Browsers that support HTML5 download attribute
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        link.setAttribute('download', filename);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }

this worked for csv export with excel format in vuejs.

score 0 · Answer 4 · edited Feb 20 '20 at 16:15

If you have some symbols in the csv and the accepted solution is not solving the problem:

blob = new Blob(["\ufeff", csv_content]);
// for csv_content you can try like below.
function b64DecodeUnicode(str: any) {        
        return decodeURIComponent(atob(str).split('').map((c: any) => {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));
    }

Download BLOB content using specified charset

4 Answers4

Linked