使用 javascript 创建的锚点下载属性不适用于 iOS Chrome

Question

我在 AWS S3 存储桶中保存了一个视频/mp4 文件，当用户单击某个图标时，应从客户端设备（手机或计算机）下载该文件。我首先使用fetch发出请求，然后根据响应创建一个blob对象。接下来，我使用 javascript 创建一个锚元素，我附加了 href 属性并触发它的点击，如下面的代码所示：

fetch(url, {
      headers: new Headers({
        'Content-Disposition': "attachment; filename='file-name.mp4'",
      }),
    }).then((response): void => {
      if (!response.ok) {
        console.log('Error', response);
      }

      response.blob().then((blob): void => {
        let videoUrl = window.URL.createObjectURL(blob);
        let a = document.createElement('a');
        document.body.appendChild(a);
        a.href = videoUrl;
        a.download = 'file-name.mp4';
        a.target = '_blank';
        a.click();
        document.body.removeChild(a);
      });
    });

测试此代码时，它适用于 Android Chrome 和 iOS Safari，但不适用于 iOS Chrome。我可以看到一个请求被触发但没有任何反应，甚至没有打开一个新选项卡。我尝试了其他一些方法，例如使用FileSaver.js库，也尝试了像下面示例中的FileReader，但仍然无法正常工作。

fetch(url, {
      headers: new Headers({
        'Content-Disposition': "attachment; filename='file-name.mp4'",
      }),
    }).then((response): void => {
      if (!response.ok) {
        console.log('Error', response);
      }

      response.blob().then((blob): void => {
        FileSaver.saveAs(blob, 'file-name.mp4');
      });
    });


fetch(url, {
      headers: new Headers({
        'Content-Disposition': "attachment; filename='file-name.mp4'",
      }),
    }).then((response): void => {
      if (!response.ok) {
        console.log('Error', response);
      }

      response.blob().then((blob): void => {
        let reader = new FileReader();

        reader.readAsDataURL(blob);

        reader.onloadend = (): void => {
            if (reader.result) {
                let url = reader.result.toString();

                window.open(url, '_blank');
           }
        };
      });
    });

blob 类型是“应用程序/八位字节流”。有没有人遇到过类似的问题或有任何其他新方法的想法？谢谢！