使用Blob创建的文件不支持NON-ASCII字符

Question

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

• Download BLOB content using specified charset
• F-8 encoidng issue when exporting csv file , JavaScript

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.

Answer 1

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>