File created with blob does not support NON-ASCII characters

Question

First of all I have to say that questions similar to this have been asked before, but the answers did not help.

This is the code.

ctrl.downloadFile = function (file) {
  var filename = file.filename.split("/"),
  name = (filename[filename.length - 1]);
  $http({method: 'GET', url: '/download/' + name}, {responseType: "blob"}).then(
    function success(response) {
      var blob = new Blob([response.data], {type: response.headers['content-type'] + ";text/csv;charset=utf-8,%EF%BB%BF"}),
        url = $window.URL || $window.webkitURL,
        fileUrl = url.createObjectURL(blob);
      var anchor = document.createElement('a');

      anchor.href = fileUrl;
      anchor.target = '_blank';
      anchor.download = name;
      anchor.style = "display: none";

      document.body.appendChild(anchor);
      anchor.click();

      setTimeout(function () {
        document.body.removeChild(anchor);
      }, 100);
    }
  )
};

This is the html code that calls the downloadFile() function.

<a  ng-click="$ctrl.downLoadFile(file)"  target='_blank'>{{file.filename}}</a>

The Downloaded file does not support German special characters(Å, Ø, Ü ). What to do that the file supports those characters?

Update 1: I have done this also. But it did not work either.

var blob = new Blob(["\ufeff", response.data], 
                     {type: response.headers['content-type'] +
                      ";text/csv;charset=utf-8"})

Update 2: It works fine if I use these characters(Å, Ø, Ü ) instead of the response.data.

   var blob = new Blob(["\ufeff", "Å Ø Ü" ], 
                         {type: response.headers['content-type'] +
                          ";text/csv;charset=utf-8"})

Update 3: This is a single page application. And Yes ,I have used <meta charset="utf-8"> in the head section of the html page.

set the text encoding to something like UTF8, or whatever the input encoding formatting was. — Tschallacka, Aug 04 '17 at 08:36
Does not this do that ? `{type: response.headers['content-type'] + ";text/csv;charset=utf-8"}` — mahan, Aug 04 '17 at 08:37
Try to Change Character Set to **ISO-8859-1** or **ISO/IEC 8859-15**. — Utkarsh Dubey, Aug 04 '17 at 08:41
The problem is, the text is displayed in the encoding the containing document is. So make sure your original html document is served with UTF-8 headers and meta tags so the browser uses UTF-8 . — Tschallacka, Aug 04 '17 at 08:43
@mahan Can you provide us with the headers your webpage is served, and did you use a meta charset=? in your header? Because if it doesn't work it seems that somewhere your document is not served/interpreted as UTF8 — Tschallacka, Aug 04 '17 at 11:55
@Tschallacka. This is a single page application. Yes. I have used ` `. I have checked the `response` in Chrome developer tool. There is no problem with it. — mahan, Aug 04 '17 at 12:07
Where does `name` come from and why not just put the `download` attribute on the original anchor? — Musa, Aug 04 '17 at 19:48
@musa `name` is a variable defined in the function.I copied that portion of the code form an another `function`. Now, I have fixed the code. Because I think it is easier and cleaner to write it in JavaScript rather than in the HTML file. — mahan, Aug 07 '17 at 08:05

score 0 · Accepted Answer · answered Apr 25 '18 at 07:11

Using the whole ctrl.downloadFile() was unnecessary. Instead, I used a function to make the download link and then call it in ng-href.

ctrl.urlForFile = function(file) {
  var split = file.filename.split("/");
  return '/download/' + file['xyz'] + "/" + split[split.length - 1];
};

<a ng-href="{{$ctrl.urlForFile(file)}}" target='_blank'>{{file.filename}}</a>

If you do not need to make the download link dynamically, you should use the link directly in ng-href.

<a ng-href="/download/xyz/dfdsf23423423" target='_blank'>{{file.filename}}</a>

File created with blob does not support NON-ASCII characters

This is the code.

1 Answers1