如何在非安全上下文调用window.showSaveFilePicker()？

没办法在非安全上下文调用showSaveFilePicker()，这个限制是浏览器层面强制的安全机制——浏览器会严格校验触发该API的操作是否来自真实的用户主动手势（比如手动点击按钮、按下键盘快捷键），目的是防止恶意网站未经许可就弹出文件选择器，骚扰用户或窃取本地文件相关信息。

你尝试用脚本创建按钮并模拟点击的方式无效，是因为浏览器能识别出这种点击是脚本触发的，不属于用户主动发起的交互，所以依然会拦截API调用。

如果需要强制弹出文件保存对话框，只能通过绑定真实的用户交互事件来实现：

• 直接把showSaveFilePicker()的调用逻辑绑定到用户手动触发的事件上，比如按钮的click事件、键盘的快捷键事件。
• 如果你只是想让用户选择保存路径，也可以用传统的<a>标签配合Blob实现下载，但这种方式无法绕过浏览器的自动下载设置，只有showSaveFilePicker()能强制弹出选择对话框，但前提必须是用户主动触发。

示例代码（绑定真实按钮点击）：

document.querySelector('#saveBtn').addEventListener('click', async () => {
  try {
    const handle = await window.showSaveFilePicker({
      suggestedName: '默认文件名.txt',
      types: [{
        description: '文本文件',
        accept: { 'text/plain': ['.txt'] }
      }]
    });
    const writable = await handle.createWritable();
    await writable.write(你的Blob对象);
    await writable.close();
  } catch (err) {
    console.error('保存失败:', err);
  }
});

内容的提问来源于stack exchange，提问作者caroline gomes