在 javascript 中的安全上下文之外调用 window.showSaveFilePicker()

Question

我在浏览器中使用javascript文件API，强制打开下载文件的对话框窗口，我的目标是使此窗口在下载时始终打开，即使用户已在其文件中定义了下载浏览器如果自动。

为此，我使用 window.showSaveFilePicker() 函数打开窗口，然后添加来自下载的文件 (Blob)。 问题是，根据以下文档，对 window.showSaveFilePicker() 的调用只能在安全上下文中执行：https://web.dev/file-system-access/

也就是说，如果我这样调用这个函数：

    async function DownloadFile(){
      async function startDialogWindow() {
    
        const options = {
           types: [
             {
               description: 'Text Files',
               accept: {
                 'text/plain': ['.txt'],
               },
             },
           ],
         };
        // an exception will be thrown here
        const handle = await window.showSaveFilePicker(options);
      }
    
      await startDialogWindow()
    }

异常“DOMException：无法在“窗口”上执行“showSaveFilePicker”：必须处理用户手势以显示文件选择器。”将被释放。

但是如果像这样进行相同的调用：

buttonTest.addEventListener('click', async() => {
  const handle = await window.showSaveFilePicker(options);
} )

无异常发生。

鉴于此，有什么方法可以在不安全的上下文中运行 window.showSaveFilePicker 吗？

我也尝试过：

let handle = null;
let buttonTest = document.createElement('button');
buttonTest.addEventListener('click', async() => {
      handle = await window.showSaveFilePicker(options);
} );
buttonTest.click()

但我没有成功。

Answer 1

我找到了问题的答案。 我无法解释为什么该解决方案有效，但是当我从代码中删除所有“调试器”关键字时，异常停止抛出，即让流程正常流动而不停止调试解决了问题。这很奇怪，但这就是正在发生的事情。

Answer 2

当我有断点时，我会得到同样的不良行为（至少在 Chrome 中）。使调试变得困难！