Alternative to msSaveOrOpenBlob on Chrome

Question

i need to find alternative to "msSaveOrOpenBlob ", that work on IE, for Firefox and Chrome. On Chrome in particular that not work and don't show the dialog box to chose if save or open file.

Can you suggest me how can i let open the dialog box to let the user choose if he want to save or open the file?

I'm actualy using Angular 6.

Chatty

Is there any update on this problem, have you found an alternative or solution by any chance? – Upcountry

Answer 1

As mentioned in another SO response, you need to test for the browser type and use the right API:

var download_csv_using_blob = function (file_name, content) {
    var csvData = new Blob([content], { type: 'text/csv' });
    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
        window.navigator.msSaveOrOpenBlob(csvData, file_name);
    } else { // for Non-IE (chrome, firefox etc.)
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";
        var csvUrl = URL.createObjectURL(csvData);
        a.href =  csvUrl;
        a.download = file_name;
        a.click();
        URL.revokeObjectURL(a.href)
        a.remove();
    }
};

Or also see SO.

Lesbian

Answer 2

msSaveOrOpenBlob method will only work for the IE browser. The method that works for other browsers like Mozilla and Chrome will not work in the IE browser.

You need to detect the IE browser using code and then try to use msSaveOrOpenBlob method. If the browser is not IE then you can use the method that works for other browsers.

You can check the example below for downloading the Blob file. You can make a test with this example to see whether it is working as per your requirement or not.

App.component.ts

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular 5';
  fileUrl;
  constructor(private sanitizer: DomSanitizer) {  }
  ngOnInit() {
    const data = 'some text';
    const blob = new Blob([data], { type: 'application/octet-stream' });

    this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
  }

}

Stackblitz live example

Cyruscyst

No man, i need something like this : filestore.community.support.microsoft.com/api/images/… – Beckerman

I tried to find but did not get an example to get that popup for save and open a file. I suggest you can provide the link to download the file. – Cyruscyst

I just create a popup that let the user chose if download or open the file but i don't know why chrome don't have this stuff. – Beckerman

Thanks for sharing the solution to the issue. I suggest you post your solution as an answer for this thread and try to mark your own answer as an answer to this question after 48 hrs when it is available to mark. It can help other community members in the future in similar kinds of issues. Thanks for your understanding – Cyruscyst

Answer 3

Use FileSaver.js.

it's very simple to use:

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "filename.txt");

Sugary