feat: Add IE 11 download support (#176)

scttcper · Oct 21, 2019 · 89e0ac6 · 89e0ac6
1 parent 8f55d8b
commit 89e0ac6
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 6 deletions.
diff --git a/src/lib/csv.directive.ts b/src/lib/csv.directive.ts
@@ -1,7 +1,7 @@
-import { Directive, HostBinding, Input, OnChanges } from '@angular/core';
+import { Directive, HostBinding, HostListener, Input, OnChanges } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
-import { buildURI, HeaderObj } from './util';
+import { blob, buildURI, HeaderObj } from './util';
 
 @Directive({ selector: '[csvLink]' })
 export class CsvDirective implements OnChanges {
@@ -21,9 +21,20 @@ export class CsvDirective implements OnChanges {
   @HostBinding() href?: SafeResourceUrl;
   /** filename */
   @HostBinding() download = 'data.csv';
-  @Input() @HostBinding() target = '_blank';
+  @Input() @HostBinding() target = this.isIEBrowser() ? '' : '_blank';
   constructor(private sanitizer: DomSanitizer) {}
 
+  @HostListener('click') onClick() {
+    if (this.isIEBrowser()) { //IE handling
+      const file = blob(this.data, this.uFEFF, this.headers, this.delimiter);
+      window.navigator.msSaveBlob(file, this.download);
+    }
+  }
+
+  isIEBrowser(): boolean {
+    return !!window.navigator.msSaveOrOpenBlob;
+  }
+
   ngOnChanges() {
     this.href = this.sanitizer.bypassSecurityTrustResourceUrl(
       buildURI(this.data, this.uFEFF, this.headers, this.delimiter),

diff --git a/src/lib/util.spec.ts b/src/lib/util.spec.ts
@@ -1,5 +1,6 @@
 import {
   arrays2csv,
+  blob,
   buildURI,
   isArrays,
   isJsons,
@@ -203,6 +204,19 @@ describe(`core::toCSV`, () => {
   });
 });
 
+describe(`core::blob`, () => {
+  const fixtures = {
+    string: 'Xy',
+    arrays: [['a', 'b'], ['c', 'd']],
+    jsons: [{}, {}],
+  };
+
+  it(`creates blob instance`, () => {
+    expect(blob(fixtures.arrays)).toBeTruthy();
+    expect(blob(fixtures.string)).toBeTruthy();
+  });
+});
+
 describe(`core::buildURI`, () => {
   const fixtures = {
     string: 'Xy',

diff --git a/src/lib/util.ts b/src/lib/util.ts
@@ -92,13 +92,21 @@ export function toCSV(
   );
 }
 
-export function buildURI(
+export function blob(
   data: string | string[][] | { [key: string]: string }[] | any[],
   uFEFF = true,
   headers?: string[] | HeaderObj[],
   delimiter?: string,
 ) {
   const csv = toCSV(data, headers, delimiter);
-  const blob = new Blob([uFEFF ? '\uFEFF' : '', csv], { type: 'text/csv' });
-  return URL.createObjectURL(blob);
+  return new Blob([uFEFF ? '\uFEFF' : '', csv], { type: 'text/csv' });
+}
+
+export function buildURI(
+  data: string | string[][] | { [key: string]: string }[] | any[],
+  uFEFF = true,
+  headers?: string[] | HeaderObj[],
+  delimiter?: string,
+) {
+  return URL.createObjectURL(blob(data, uFEFF, headers, delimiter));
 }