如何获取用户插入的下载文件名？答案

【问题标题】：How to get downloaded file name inserted by the user?如何获取用户插入的下载文件名？
【发布时间】：2018-10-20 20:24:05
【问题描述】：

在我的 JavaScript 中，我使用带有下载属性的 <a> 标记让用户下载生成的文件。我可以为文件设置一个默认名称，但是用户可能会在将其保存到他们的系统之前更改它。有没有办法获取用户在保存对话框中写的名字？

这样做的主要原因是，当用户再次下载文件时，我可以再次使用相同的名称作为默认名称。

代码如下：

var json = JSON.stringify(currentProject, null, '\t');

var a = document.createElement('a');
a.href = URL.createObjectURL(new Blob([json], {type: 'text/json'}));
a.download = currentProjectName;

a.click();

如果使用 <a> 标记方法无法做到这一点，我想知道在某种程度上允许这样做的其他下载方法。

【问题讨论】：

标签： javascript html

【解决方案1】：

如果没有为最终用户定制的客户端，我认为您无法做到这一点，保存对话框由操作系统控制，但您可以向用户提供他在您的应用程序中重命名文件，如下所示：working code on repl.it

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Download</title>
</head>

<body>
  <div>
    <input type="text" id="filename-input" value="">
    <a id="download" href="generated-filename.txt" download>Download</a>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', loadDefaultFilename, false);

    function loadDefaultFilename() {
      // this could be value from database or cookie
      let userDefaultFilename = localStorage.getItem('default-filename') || 'generared-file.txt';

      let filenameInput = document.getElementById('filename-input');
      let fileDownloadLink = document.getElementById('download');
      fileDownloadLink.setAttribute('href', userDefaultFilename)
      // load default filename from somewhere, e.g database or cookie

      // set the default name
      filenameInput.value = userDefaultFilename;
    }


    let button = document.getElementById('download');
    button.addEventListener('click', function(e) {
      const defaultFilename = document.getElementById('filename-input').value;
      saveDefaultFilename(defaultFilename);
    });

    function saveDefaultFilename(filename) {
      localStorage.setItem('default-filename', filename);
      console.log(filename);
    }
  </script>
</body>

</html>

【讨论】：

【解决方案2】：

我建议您创建一个输入标签，用户在其中写入要下载的文件名，以便您可以将其放入属性下载中（并“记住它”），否则我希望此链接对您有用：

How to set name of file downloaded from browser?

【讨论】：