如何修改window.showSaveFilePicker()函数弹出窗口的标题

当前调用window.showSaveFilePicker()时，弹出的保存窗口使用浏览器默认标题，想要自定义这个标题。原代码及弹窗截图如下：

原代码：

async function getNewFileHandle() {
  const opts = {
    types: [
      {
        description: "Text file",
        accept: { "text/plain": [".txt"] },
      },
    ],
  };
  return await window.showSaveFilePicker(opts);
}
getNewFileHandle();

解决方案 #

目前标准的File System Access API并没有定义设置保存窗口标题的参数，但Chrome、Edge这类Chromium系浏览器支持一个非标准的title配置项，直接加到选项对象里就能自定义标题：

修改后的代码：

async function getNewFileHandle() {
  const opts = {
    title: "自定义保存文件", // 填入你需要的标题文本
    types: [
      {
        description: "Text file",
        accept: { "text/plain": [".txt"] },
      },
    ],
  };
  return await window.showSaveFilePicker(opts);
}
getNewFileHandle();

注意事项 #

• 这个title是非标准特性，仅在Chromium内核浏览器生效，Firefox、Safari等浏览器会忽略该参数，继续显示默认标题。
• 如果要兼容全浏览器，目前没有标准方法自定义这个弹窗标题，只能使用浏览器默认的标题样式。

内容的提问来源于stack exchange，提问作者shekhar kumar