Javascript下载文件强制提示目的地

Posted 2023-05-07

【中文标题】Javascript下载文件强制提示目的地

【英文标题】：Javascript download file force prompt destination

【发布时间】：2016-02-08 10:07:01

【问题描述】：

我正在通过 javascript 下载一个文件（该文件是在服务器上生成的），我想强制浏览器提示用户选择文件的目的地。是否可以？例如，Chrome 作为带有默认文件夹的选项，我希望能够覆盖该选项

编辑（解释重复的问题） 我认为它不是重复的，因为我知道为什么对话框没有打开，只是想问一下是否可以覆盖该行为

【问题讨论】：

Prompting user to save file using a 'Save-as' dialog?的可能重复

【参考方案1】：

您不能覆盖下载行为。许多现代浏览器在不提示用户的情况下将任何下载保存到默认位置。这就是他们下载文件的方式，期间。你不能覆盖它。是否需要提示是用户在浏览器首选项中的选择。

【参考方案2】：

是的，可以使用文件系统访问 API 覆盖该行为。 API 公开了一些将覆盖浏览器行为的方法。 只需在 Chrome 浏览器控制台中运行 window.showOpenFilePicker() 即可启动文件选择器提示。

要覆盖下载目标提示行为，您可以使用window.showSaveFilePicker() 方法。

// ...
const blob = new Blob(/*...*/);
// Use File System Access API
saveFileToDisk(blob, 'Some-File.txt')

async saveFileToDisk(blob, fileName)
      try 
        const fileHandle = await self.showSaveFilePicker(
          suggestedName: fileName,
          types: [
            
              description: "File",
              // ...
            ,
          ],
        );
        const writeFile = async (fileHandle, contents) => 
          // Create a FileSystemWritableFileStream to write to.
          const writable = await fileHandle.createWritable();
          // Write the contents of the file to the stream.
          await writable.write(contents);
          // Close the file and write the contents to disk.
          await writable.close();
        ;
        // write file
        writeFile(fileHandle, blob).then(() => console.log("FILE DOWNLOADED!!!"));
       catch (error) 
        console.log(error);
      

有关详细信息，请查看文档 https://web.dev/file-system-access/ 和 https://web.dev/browser-fs-access/

【讨论】：

截至 2021 年 12 月下旬，showSaveFilePicker 仅在 Chrome、Edge 和 Opera 上受支持，并且仅在使用 HTTPS 时才受支持。 developer.mozilla.org/en-US/docs/Web/API/Window/…