Question

在我的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>标记方法执行此操作，我想知道以某种方式允许此操作的其他下载方法。

Answer 1

我认为如果没有为最终用户定制的客户端，您不能做到这一点，保存对话框是由OS控制的，但是您可以向用户提供他在应用程序中重命名文件的方式，例如：{{3 }}

<!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>

Answer 2

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

How to set name of file downloaded from browser?

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

2 个答案: