如何使用 javascript 更改下载时的文件名？

Question

该脚本添加了视频的下载链接（在特定站点上）。下载时如何将文件名更改为其他名称？

Example URL:
"http://website.com/video.mp4"

Example of what I want the filename to be saved as during download:
"The_title_renamed_with_javascript.mp4"

Answer 1

这实际上可以通过 JavaScript 实现，尽管浏览器支持参差不齐。 您可以使用 XHR2 将文件作为 Blob 从服务器下载到浏览器，创建 Blob 的 URL，创建一个锚点，并将其 href 属性设置为该 URL，将下载属性设置为您想要的文件名，然后单击链接。 这适用于 Google Chrome，但我尚未验证其他浏览器的支持。

window.URL = window.URL || window.webkitURL;

var xhr = new XMLHttpRequest(),
      a = document.createElement('a'), file;

xhr.open('GET', 'someFile', true);
xhr.responseType = 'blob';
xhr.onload = function () {
    file = new Blob([xhr.response], { type : 'application/octet-stream' });
    a.href = window.URL.createObjectURL(file);
    a.download = 'someName.gif';  // Set to whatever file name you want
    // Now just click the link you created
    // Note that you may have to append the a element to the body somewhere
    // for this to work in Firefox
    a.click();
};
xhr.send();

Answer 2

您无法使用客户端 JavaScript 执行此操作，您需要设置响应标头...

.NET

Response.AddHeader("Content-Disposition", "inline;filename=myname.txt")

或 PHP

header('Content-Disposition: inline;filename=myname.txt')

还提供您选择的其他服务器端语言版本。

Answer 3

下载的文件名在标题中设置（查看“Content-Disposition”），它是在服务器端创建的。

除非您有权访问服务器端，否则您无法使用纯 JavaScript 对要链接的文件进行更改（这样您可以传递一个提供文件名的附加参数并更改服务器端行为来设置header 来匹配...但这也可以使用纯 html，不需要 javascript）。结论：Javascript对于实现你想要的东西绝对没有用。

Answer 4

您可以可能使用 Chrome 用户脚本来完成此操作，但还不能使用 Greasemonkey (Firefox) javascript 来完成。

解决方法（从最简单到最难）：

1. 使用 Greasemonkey 添加链接，但使用优秀的 DownThemAll！ 附加组件 下载并重命名视频。

2. 按原样下载视频并使用批处理文件、shell 脚本、Python 程序等对其进行重命名。

3. 使用 Greasemonkey 的

   GM_xmlhttpRequest()

   ^Doc 功能将文件发送到您控制的服务器上您自己的 Web 应用程序。
   该服务器可以是您自己的运行 XAMPP（或类似）的 PC。

4. 编写您自己的 Firefox 插件，而不是 Greasemonkey 脚本。 附加组件具有所需的权限，而 Greasemonkey 则没有。

Answer 5

据我所知，您将无法从客户端本身执行此操作。您可以首先使用所需名称将文件上传到服务器，然后将其返回给最终用户（在这种情况下将使用您的文件名）。

Answer 6

万一您正在为令人讨厌的下载 chrome 扩展程序寻找这样的解决方案，您应该查看 chrome.downloads API，它需要额外的权限（“下载”）并允许您指定文件名。 https://developer.chrome.com/extensions/downloads

但是我现在面临一个问题。我正在重构的 Chrome 扩展拥有 60 万以上的用户群，添加新权限将禁用所有用户的扩展。所以这对我来说是不行的解决方案，但如果你正在开发一个新的扩展，你绝对应该使用它。

Answer 7

如果文件不太大，您可以通过将数据下载到客户端的内存中，然后将它们作为数据 URL 提供给浏览器来实现：

  const response = await fetch(url)
  if (!response.ok) {
    return
  }

  const blob = await response.blob()
  const dataUrl = await blobToDataURL(blob) //npm i blob-util

  const a = document.createElement('a') // Create <a>
  a.href = dataUrl
  a.download = fileName // File name Here
  a.click() // Downloaded file