Search code examples
javascripthtmlnode.jsexpressexceljs

HTML5/JavaScript "Save As" Dialog for File Download

I've written a NodeJS/Express application that generates and downloads an excel document (created using ExcelJS) upon the user pressing a button. When the user presses the button, the file is generated then downloaded to the user's default download location. I'd prefer the user be able to select where they'd like to download the file upon pressing the button. Is this possible?

My current JavaScript code is as follows:

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);
    });
}
Solution

  • This is possible in desktop versions of latest Chrome-based browsers (Chrome, Edge, Opera).

    Current support: 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

    We use this for working with PDF files: https://webpdf.pro/doc/ (draft for next release).
    Note that you can suggest a file name and folder, customize the file type list, offer multiple types! showSaveFilePicker In fact, we have a method called exactly that: <pdf-file>.saveAs().

    draft

    Online version of Visual Studio Code is another recent user: https://vscode.dev/.

    Apple and Firefox are likely to drag their feet on this one citing privacy/security concerns for at least the next few months though.