HTML5/JavaScript "Save As" 文件下载对话框

Question

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

我目前的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

我不相信这是可能的，不。此行为由用户浏览器中的设置控制。对于大多数浏览器，甚至可能是所有浏览器，默认行为是始终将文件下载到默认位置，而不显示用户可以更改其目标或文件名的提示。可以理解的是，您无法从 JavaScript.

更改用户的浏览器设置

很高兴看到我错了，我没有意识到文件系统访问 API Cetin Sert 的回答描述存在。

Answer 2

这在基于 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代码是另一个最近的用户：https://vscode.dev/.

Apple 和 Firefox 可能会在这个问题上拖延，理由是 privacy/security 至少在接下来的几个月里会感到担忧。

HTML5/JavaScript "Save As" 文件下载对话框

HTML5/JavaScript "Save As" Dialog for File Download

html

javascript

node.js

express

exceljs