Download text/csv content as files from server in Angular not working in Mozilla FireFox

Question

Download text/csv content as files from server in Angular

Answered By - https://stackoverflow.com/users/2064206/dcodesmith

$http({method: 'GET', url: '/someUrl'}).
  success(function(data, status, headers, config) {
     var anchor = angular.element('<a/>');
     anchor.attr({
         href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data),
         target: '_blank',
         download: 'filename.csv'
     })[0].click();

  }).
  error(function(data, status, headers, config) {
    // if there's an error you should see it here
  });

I implemented this solution for downloading files from server to client using angular. This is perfectly working fine in Google chrome. But this Solution is not working in Mozilla Firefox.

Thanks

initialxy · Accepted Answer · 2015-08-03 07:37:50Z

9

You have to attach the anchor you created to your document first. Add the followings:

var anchor = angular.element('<a/>');
anchor.css({display: 'none'}); // Make sure it's not visible
angular.element(document.body).append(anchor); // Attach to document

anchor.attr({
    href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data),
    target: '_blank',
    download: 'filename.csv'
})[0].click();

anchor.remove(); // Clean it up afterwards

Fiddle

answered Aug 3, 2015 at 7:37

initialxy

1,1838 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manos Nikolaidis · Accepted Answer · 2016-03-15 23:22:18Z

1

You should use encodeURIComponent() instead of encodeURI() - because of better encoding of characters like #, &, =. See documentation on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

edited Mar 15, 2016 at 23:22

Manos Nikolaidis

22.3k12 gold badges76 silver badges82 bronze badges

answered Mar 15, 2016 at 23:02

maciejlesniak

634 bronze badges

Comments

Johan Alexis Duque Cadena · Accepted Answer · 2016-04-19 08:31:52Z

0

Just to recap, the solution that worked for me is (using encodeURIComponent as maciejlesniak suggested):

$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
var anchor = angular.element('<a/>');
anchor.css({display: 'none'}); // Make sure it's not visible
angular.element(document.body).append(anchor); // Attach to document

anchor.attr({
    href: 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(data),
    target: '_blank',
    download: 'filename.csv'
})[0].click();

anchor.remove(); // Clean it up afterwards

  }).
  error(function(data, status, headers, config) {
    // if there's an error you should see it here
  });

answered Apr 19, 2016 at 8:31

Johan Alexis Duque Cadena

5378 silver badges22 bronze badges

Comments

sajan · Accepted Answer · 2017-04-28 11:42:55Z

0

You can also work around something like this.

var anchor = angular.element('<a/>');
anchor.attr({
  href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data),
  target: '_blank',
  download: 'filename.csv'
});
var click = new MouseEvent('click', {
      'view': window,
      'bubbles': true,
      'cancelable': true
  }); 
anchor[0].dispatchEvent(click);

This should work Firefox as well, without attaching the anchor tag on the document.body

answered Apr 28, 2017 at 11:42

sajan

1,3801 gold badge14 silver badges20 bronze badges

Collectives™ on Stack Overflow

Download text/csv content as files from server in Angular not working in Mozilla FireFox

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related