html - HTML5JavaScript "Save As" Dialog for File Download - Stack Overflow

admin管理员组

文章数量:1355581

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

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

• javascript
• html
• node.js
• express
• exceljs

Share Improve this question Follow asked Oct 28, 2021 at 19:17 GriffsAccountGriffsAccount 14522 silver badges1515 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

Current support: https://caniuse./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! In fact, we have a method called exactly that: <pdf-file>.saveAs().

---

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.

async function saveFile(){
      var mystring = "Hello World!";
      var myblob = new Blob([mystring], {
        type: 'text/plain'
      });

      if( window.showSaveFilePicker ) {
            const opts = {
                types: [{
                  description: 'MYfile',
                  accept: {'text/plain': ['.txt']},
                }],
                suggestedName: 'myFileText',
              };
            var handle = await showSaveFilePicker(opts);
            var writable = await handle.createWritable();
            await writable.write( myblob );
            writable.close();
        }else{
          alert( "xxx" );
        }
}

<button id="botonx" onClick="saveFile()" >Save File</button>

I don't believe this is possible, no. This behaviour is controlled by settings in the user's browser. For most browsers, or perhaps even all of them, the default behaviour is to always download files to a default location without showing a prompt where the user can change its destination or filename. Understandably, you can't change a user's browser settings from JavaScript.

Glad to see I was wrong about this, I didn't realise the File System Access API Cetin Sert's answer describes exists.

本文标签： htmlHTML5JavaScript quotSave Asquot Dialog for File DownloadStack Overflow