Chrome 警告下载多个文件，尽管只有一个文件

问题描述

我以前从未遇到过这个问题，但是每当我尝试以编程方式下载文件时，chrome 都会阻止该尝试并警告我，该页面想要下载多个文件......但它们不是。

我收到一个包含一些信息的 JSON，但其中一个字段名为 documentContentB64 并且有一个 base64 编码的 pdf 文件。下面的代码（为了简洁起见稍微简单一点）最后，如果我允许 Chrome 下载多个文件，只需按预期给我一个 PDF。

  downloadInvoicePdfData() {
    this.httpClient.get('<url>',{ observe: 'response' }).subscribe((invoiceFile: any) => {
        this.downloadPdf(invoiceFile.body.documentContentB64);
      });
  }

  private downloadPdf(base64File: string) {
    const downloadLink = document.createElement('a');
    const file = base64File;
    downloadLink.href = 'data:application/pdf;base64,' + file;
    downloadLink.download = `invoice.pdf`;
    downloadLink.dispatchEvent(new MouseEvent('click',{ bubbles: true,view: window }));

    window.URL.revokeObjectURL(downloadLink.href);
    downloadLink.remove();
  }

解决方法

好吧，我对此没有合理的解释。我回到了我的“旧”解决方案，它适用于 BLOB 并且......它只是有效。当您提供一个 blob 的 ObjectUrl 时，当您执行几乎相同的步骤来设置程序化下载时，Chrome 不会抱怨。我需要研究一下。

async downloadPdf(base64File: string) {
    this.fileLink = 'data:application/pdf;base64,' + base64File;

    const base64Response = await fetch(this.fileLink);
    const blob = await base64Response.blob();

    const downloadLink = document.createElement('a');
    downloadLink.href = window.URL.createObjectURL(blob);
    downloadLink.download = 'invoice.pdf';
    downloadLink.dispatchEvent(new MouseEvent('click',{ bubbles: true,view: window }));
    window.URL.revokeObjectURL(downloadLink.href);
    downloadLink.remove();
  }