Chrome 上 msSaveOrOpenBlob 的替代方案

Question

我需要找到“msSaveOrOpenBlob”的替代品 “，这适用于 IE、Firefox 和 Chrome。特别是在 Chrome 上，它不起作用，并且不显示选择保存或打开文件的对话框。

你能建议我如何打开对话框让用户选择是否要保存或打开文件吗？

我实际上正在使用 Angular 6。

Answer 1

正如另一个SO回复中提到的，您需要测试浏览器类型并使用正确的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();
    }
};

或者另见SO。

Answer 2

msSaveOrOpenBlob方法仅适用于IE浏览器。适用于 Mozilla 和 Chrome 等其他浏览器的方法不适用于 IE 浏览器。

您需要使用代码检测IE浏览器，然后尝试使用msSaveOrOpenBlob方法。如果浏览器不是 IE 那么您可以使用适用于其他浏览器的方法。

您可以查看下面的示例来下载 Blob 文件。您可以使用此示例进行测试，看看它是否按照您的要求工作。

应用程序组件.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 实例

Answer 3

使用 FileSaver.js。

使用非常简单：

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