Ionic文件下载在原生应用失效但Web浏览器端正常的问题求助

我正在实现从服务器下载任意文件的功能，下述代码在浏览器中运行正常，但在APP中无法生效，看起来是这段代码无法正常执行：

document.body.appendChild(downloadLink);
downloadLink.click();

完整的前端下载逻辑代码：

downloadFile(directory: string, filename: string = null): void {
    const baseUrl = this.service.Base_Url + 'download.php?dir=files/' + directory + '/&file=' + filename;
    this.service.process_download(baseUrl).subscribe(
      (response: any) => {
        // 校验文件是否存在
        if (response.size > 0) {
          let dataType = response.type;
          let binaryData = [];
          binaryData.push(response);
          let downloadLink = document.createElement('a');
          downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, { type: dataType }));
          if (filename) {
            downloadLink.setAttribute('download', filename);
          }
          document.body.appendChild(downloadLink);
          downloadLink.click();
        }
      }
    )
}

下载请求处理函数：

public process_download(url: any) {    
    if (this.Base_Url != undefined) {
      return this.http.get(url, { responseType: 'blob' });
    }
}

后端download.php下载逻辑：

//Download function starts from here
    $varFilePath = SOURCE_ROOT . $varDir . $varFile;
    header("Pragma: public");
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Content-Type: application/force-download");
    header("Content-Disposition: attachment; filename=" . $varFile);
    header("Content-Transfer-Encoding: binary");
    header("Content-Length: " . filesize($varFilePath));
    header("Content-Description: File Transfer");
    @readfile($varFilePath);
    exit();

当前用的动态创建<a>标签触发下载的逻辑，依赖浏览器原生对download属性的支持和下载流程处理。而APP内嵌的WebView默认会拦截动态触发的下载请求，也没有完整实现浏览器的下载能力，所以downloadLink.click()执行后不会触发实际下载。

方案1：直接跳转下载地址（兼容性最佳） #

后端已经配置了正确的Content-Disposition: attachment响应头，完全不需要前端转Blob处理，直接跳转下载地址即可，WebView会识别该请求并触发系统下载：

downloadFile(directory: string, filename: string = null): void {
    const baseUrl = this.service.Base_Url + 'download.php?dir=files/' + directory + '/&file=' + filename;
    // 优先用新开窗口跳转，避免覆盖当前页面
    window.open(baseUrl, '_blank');
    // 若window.open被WebView拦截，可替换为当前页面跳转
    // window.location.href = baseUrl;
}

方案2：Blob下载逻辑适配WebView #

如果必须用Blob处理（比如需要在请求头加鉴权信息等场景），调整前端代码适配WebView特性：

downloadFile(directory: string, filename: string = null): void {
    const baseUrl = this.service.Base_Url + 'download.php?dir=files/' + directory + '/&file=' + filename;
    this.service.process_download(baseUrl).subscribe(
      (response: any) => {
        if (response.size <= 0) return;
        const blobUrl = window.URL.createObjectURL(response);
        const downloadLink = document.createElement('a');
        downloadLink.href = blobUrl;
        downloadLink.download = filename || 'download';
        downloadLink.style.display = 'none';
        document.body.appendChild(downloadLink);
        // 部分WebView需要延迟触发点击才能识别下载请求
        setTimeout(() => {
          downloadLink.click();
          // 点击后及时释放资源，避免WebView内存溢出
          document.body.removeChild(downloadLink);
          window.URL.revokeObjectURL(blobUrl);
        }, 100);
      }
    )
}

方案3：后端响应头优化 #

当前用的application/force-download是非标准MIME类型，部分WebView对该类型兼容性较差，可替换为文件实际的MIME类型：

// 替换原Content-Type行
$finfo = new Finfo(FILEINFO_MIME_TYPE);
$mime = $finfo->file($varFilePath);
header("Content-Type: ".$mime);

内容的提问来源于stack exchange，提问作者Deepak Dholiyan