CODEWITHSUNDEEP
javascriptangularjsgoogle-chromeecmascript-6export-to-csv
Jimmy
Jimmy

Reputation: 83

CSV Export of Table in Chrome Not Working - JavaScript/AngularJS

I'm currently working on fixing a CSV Export of a data table on a web application. It's currently able to export on all needed browsers except Chrome when you click the export button. I've been trying to figure it out for a while now and I'm resisting pulling my hair out.

The code below is my service that was working until recently. Any help is greatly appreciated.

svc.downloadContent =
(target, fileName, content) => {
  if (!browserSvc.canDownloadFiles()) return;

  // IE10
  if (window.navigator.msSaveOrOpenBlob) {
    const blob = new Blob([content], {type: 'text/csv'});
    window.navigator.msSaveOrOpenBlob(blob, fileName);
  // IE9
  } else if (env.browser === 'Explorer') {
    const frame = document.createElement('iframe');
    document.body.appendChild(frame);
    angular.element(frame).hide();

    const cw = frame.contentWindow;
    const cwDoc = cw.document;
    cwDoc.open('text/csv', 'replace');
    cwDoc.write(content);
    cwDoc.close();
    cw.focus();
    cwDoc.execCommand('SaveAs', true, fileName);

    document.body.removeChild(frame);
  // Sane browsers
  } else {
    const blob = new Blob([content], {type: 'text/csv'});

    const url = URL.createObjectURL(blob);

    const a = angular.element(target);
    const download = a.attr('download');
    // If not already downloading ...
    if (!download) {
      a.attr('download', fileName);
      a.attr('href', url);

      // This must run in the next tick to avoid
      // "$digest already in progress" error.
      //$timeout(() => target.click());
      try {
        target.click();
        // Clear attributes to prepare for next download.
        a.attr('download', '');
        a.attr('href', '');
      } catch (e) {
        console.error('csv-svc.js: e =', e);
      }
    }
  }

Upvotes: 3

Views: 730

Answers (1)

Jimmy
Jimmy

Reputation: 83

I managed to figure this out just a couple minutes after posting my question. I needed to add an else if just for Chrome. However, I will post the fix and leave this up, in hopes that it may help someone else in the future. 

else if (env.browser === 'Chrome') {

    const blob = new Blob([content], {type: 'text/csv'});

    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.style = 'visibility:hidden';
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

  }

Upvotes: 2

Related Questions