HTML <a> Link href 在 "Relative Path" 中不适用于 "Embedded Spaces"

Question

我搜索了所有我能想到的地方，但找不到一个包含本地主机上带有嵌入空格的相对路径的“a”href 的示例。我正在尝试从位于“json/test file.json” 的本地主机下载 json 文件。如果我将文件重命名为“json/test-file.json”，那么 link 可以正常工作。我有数百个 json 文件，重命名它们会破坏其他应用程序。我也试过在 'json/test file.json' 周围加上引号，但这也不起作用。

这是一个演示问题的简单标签

<a id="download_json" href="json/test%20file.json" title="Download JSON" target="new" download>Download</a>

我已经尝试过 encodeURI，但这是浪费时间。如果您可以像上面所示那样对 path/file 进行硬编码以进行测试而无需任何花哨的东西，那将很有帮助并避免分心。

这个问题必须有一个非常简单的解决方案，我似乎无法理解它。

任何想法将不胜感激，感谢您的宝贵时间。

Answer 1

终于找到答案了。仅 Firefox Developers Edition 有问题

function downloadJSON(filename, dataObjToWrite){
  const blob = new Blob([JSON.stringify(dataObjToWrite)], { type: "text/json" });
  const link = document.createElement("a");
  link.download = filename;
  link.href = window.URL.createObjectURL(blob);
  link.dataset.downloadurl = ["text/json", link.download, link.href].join(":");
  const evt = new MouseEvent("click", {
        view: window,
        bubbles: true,
        cancelable: true,
  });
  link.dispatchEvent(evt);
  link.remove()
};

HTML <a> Link href 在 "Relative Path" 中不适用于 "Embedded Spaces"

HTML <a> Link href Doesn't Work with "Embedded Spaces" in a "Relative Path"

html

hyperlink

relative-path