大文件下载在 Firefox 浏览器中不起作用

Question

我有一个 Angular 应用程序，用户可以在其中下载他们上传的一些文档（.jpg、.mp4 和 .pdf）。文件的下载基本上是这样进行的：调用一个服务，returns 一些关于文件的信息，如名称、类型、大小和 base64 中的内容。

这是Component中用户点击下载按钮时的下载方法：

downloadDocument(doc: Document) {
  this._subDownDocument = this.service.getDocument(doc).subscribe((resp: Document) => {
    var link = document.createElement("a");
    link.download = resp.fileName;
    link.target = "_blank";

    // Construct the URI
    link.href = resp.url;//Url is the content of the file in base64
    document.body.appendChild(link);
    link.click();

    // Cleanup the DOM
    document.body.removeChild(link);
  });
}

对于最大 12mb 的文件，它可以完美运行。但是当文件较大时，下载不会开始，服务会正确地带来文件，但我不知道为什么下载不会开始。浏览器控制台中没有显示错误。

这个问题只发生在 Firefox 中，因为在 Google Chrome 中它工作正常。知道如何解决这个问题吗？

Answer 1

我通过安装 FileSaver.js 解决了这个问题。它用于大文件目的。

npm install file-saver --save

并将我的下载方式更改为：

downloadDocument(doc: Document) {
  this._subDownDocument = this.service.getDocument(doc).subscribe((resp: Document) => {

   //Url is the content of the file in base64
   fileSaver.saveAs(this.b64toBlob(resp.url, resp.type), resp.fileName);

  });
}

private b64toBlob(dataURI, type) {

  var byteString = atob(dataURI.split(',')[1]);
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);

  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: type });
}

大文件下载在 Firefox 浏览器中不起作用

Large file downloads don't work in Firefox browser

javascript

angular

typescript

typescript2.0