JavaScript code works for downloading csv in FireFox but not Microsoft Edge

Question

This works just fine in FireFox, but when I click the activating button that calls this function in Microsoft Edge nothing happens...no prompt to download or open the file, no errors...no logs...nothing. Any help you guys could provide would be greatly appreciated. Thanks!!!!

    let val:string='';
    let valList = [] ;
    let valStr:string = '';
    let keysItr = Object.keys(this.policies[0]);
    let keyList = Array.from(keysItr);
    let keyStr = keyList.toString() ;
    keyStr = keyStr.trim() ;
    keyStr = keyStr.concat('\n');

    for(var i = 0 ; i < this.policies.length ; i++ ){

      for (let key of Object.keys(this.policies[i])) {

        val = this.policies[i][key] ;
        if(val == null){
          val = '';
        }
        val = val.toString() ;
        val = val.replace('$','');
        val = val.replace(',','');
        valList.push(val);
        //console.log(val);
      }
      valStr = valStr.concat(valList.toString());
      valStr = valStr.trim() ;
      valStr = valStr.concat('\n');
      valList = [] ;

    }
    let csvStr = keyStr.concat(valStr);

    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvStr));
    element.setAttribute('download', 'FOOBAR.csv');

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);


  }//end fooBar()```

[How can I debug my JavaScript code?](https://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Andreas, Dec 18 '19 at 18:54
I could be wrong, I'm not the most up to date with ES6, but the "let" syntax that I'm familiar with is an equal, not a colon. A colon I've seen in typescript, but not plain javascript. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let — Nikki9696, Dec 18 '19 at 19:26
@Nikki9696 the "let" keyword in ES6 simply designates a variable to be block scoped within the context it is defined...but thanks anyway for the help!!! — Ego, Dec 18 '19 at 23:16

Ego · Accepted Answer · 2019-12-19T13:58:24.813

Fixed. The issue(as always it seems when I am dealing with while trying to pass data(text) via URI using Microsoft Browsers) that are at or exceeds ~5kb. We can bypass this ridiculous limitation via constructing a URI for a binary resource instead of a text resource.

Replaced this block of code :

   element.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvStr));
   element.setAttribute('download', 'FOOBAR.csv');

   element.style.display = 'none';
   document.body.appendChild(element);

   element.click();

   document.body.removeChild(element);

with this block of code:

let blob = new Blob(
      [ csvStr ],
      {
      type : "data:text/csv;charset=utf-8"
      }
      );


      const linkElement = document.createElement('a');
      const url = URL.createObjectURL(blob);
      linkElement.setAttribute('href', url);
      linkElement.setAttribute('download', 'policy_information.csv');
      const clickEvent = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
       'cancelable': false
      });
      linkElement.dispatchEvent(clickEvent);```

JavaScript code works for downloading csv in FireFox but not Microsoft Edge

1 Answers1