用于文件下载的 HTML5/JavaScript“另存为”对话框

Question

我编写了一个 NodeJS/Express 应用程序，当用户按下按钮时，它会生成并下载 Excel 文档（使用 ExcelJS 创建）。当用户按下按钮时，将生成文件，然后将其下载到用户的默认下载位置。我希望用户能够在按下按钮时选择他们想要下载文件的位置。这可能吗？

我当前的 JavaScript 代码如下：

export_button.onclick = async function() {
    await fetch('/download', {
        method: 'POST'
    })
    .then(resp => resp.blob())
    .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'document.xlsx';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
    });
}

Answer 1

这在最新的基于 Chrome 的浏览器（Chrome、Edge、Opera）的桌面版本中是可能的。

当前支持： https: //caniuse.com/mdn-api_window_showsavefilepicker

https://wicg.github.io/file-system-access/#api-showsavefilepicker
https://wicg.github.io/file-system-access/#enumdef-wellknowndirectory

我们使用它来处理 PDF 文件： https: //webpdf.pro/doc/（下一版本的草案）。
请注意，您可以建议文件名和文件夹，自定义文件类型列表，提供多种类型！ 事实上，我们有一个方法，叫做：<pdf-file>.saveAs()。

Visual Studio Code 的在线版本是另一个最近的用户： https: //vscode.dev/。

不过，至少在接下来的几个月里，苹果和火狐可能会以隐私/安全问题为由，在这一问题上犹豫不决。