window.open(url) 只用原始文本打开新窗口而不是下载答案

【问题标题】：window.open(url) only open new window with raw text instead of downloadingwindow.open(url) 只用原始文本打开新窗口而不是下载
【发布时间】：2020-12-10 23:24:18
【问题描述】：

当我使用以下方法时：

downloadFile(){
  const blob = this.b64toBlob(this.formGroup.value.attachment);
  const url = window.URL.createObjectURL(blob);
  window.open(url);
}

我希望它会打开一个新标签并下载文件。

但它只是打开一个包含原始文本内容的新标签。 This is the result I get.

但是，如果我将页面内容复制/粘贴为 URL，它运行良好，并且我的下载按预期开始。

我应该怎么做才能直接开始下载。

PS：这是 b64toBlob() 方法：

b64toBlob(b64Data: string, contentType = '', sliceSize = 512): Blob {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
}

  return new Blob(byteArrays, {type: contentType});
}

【问题讨论】：

标签： javascript html angular typescript blob

【解决方案1】：

不要使用 URL，而是使用它创建一个 href，然后您可以使用相应的点击功能。请更改您的以下功能，如下所示，希望您可以下载该文件。

downloadFile(){
            var a: any = document.createElement("a");
            a.setAttribute('style', 'display:none;');
            const blob = this.b64toBlob(this.formGroup.value.attachment);
            const url = window.URL.createObjectURL(blob);
            a.href = url;
            a.click();
        }

有时此点击在 IE 中无法正常工作。在这种情况下，您可以使用 msSaveBlob 函数。整个功能可以改变，如，

downloadFile() {
        var a: any = document.createElement("a");
        a.setAttribute('style', 'display:none;');
        document.body.appendChild(a);
        const blob = this.b64toBlob(this.formGroup.value.attachment);
        const url = window.URL.createObjectURL(blob);
        a.href = url;

        var isIE = /*@cc_on!@*/false || !!(<any>document).documentMode;

        if (isIE) {
            var retVal = navigator.msSaveBlob(blob, "test"+ '.txt');
        }
        else {
            a.download = "test" + '.txt';
        }
        a.click();
    }

【讨论】：

【解决方案2】：

所以经过几个小时的研究......

我设法让它按预期工作。

如果有人遇到同样的问题，请发布答案：

downloadFile() {
 const blob = this.b64toBlob(this.formGroup.value.attachment);
 blob.text().then(result => { // waiting for blob content to be available... 
   const a: any = document.createElement('a');
   a.download = 'test.pdf'; // or whatever your file name is
   a.href = result;
   a.click();
 });
}

a.download = 'test.pdf' 行在 chrome 上似乎是强制性的，但在 Firefox 上没有它也能正常工作。

希望这对其他人有所帮助。

【讨论】：