正文

如何修改JavaScript下载文件的默认名称？教你一招轻松更改文件名下载技巧

/0 浏览量
1102

在JavaScript中，当你需要通过AJAX请求或者使用fetch API下载文件时，默认情况下，浏览器会根据文件的MIME类型来猜测文件名。然而，有时候我们可能需要自定义下载的文件名。以下是一招轻松更改文件名下载的技巧。

使用Blob对象和URL.createObjectURL()

当你使用fetch API下载文件时，你可以利用Blob对象和URL.createObjectURL()方法来创建一个指向该Blob的URL，然后通过这个URL来触发下载。下面是如何操作的步骤：

步骤1：创建fetch请求

首先，你需要创建一个fetch请求来获取文件内容。这里假设你有一个API端点/api/download，它将返回一个文件。

fetch('/api/download')
  .then(response => {
    // 确保响应是成功的
    if (!response.ok) {
      throw new Error('Network response was not ok.');
    }
    return response.blob(); // 将响应转换为Blob对象
  })
  .then(blob => {
    // 下载文件
    downloadFile(blob, 'custom-name.txt');
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

步骤2：创建下载链接

接下来，你需要创建一个临时的链接元素，并设置其href属性为Blob对象的URL，然后触发点击事件来下载文件。

function downloadFile(blob, filename) {
  // 创建一个临时的链接元素
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = filename; // 设置下载的文件名
  document.body.appendChild(a);
  a.click(); // 触发下载
  window.URL.revokeObjectURL(url); // 释放Blob URL
  document.body.removeChild(a);
}

完整示例

将上述代码整合到一起，你将得到以下完整的示例：

fetch('/api/download')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok.');
    }
    return response.blob();
  })
  .then(blob => {
    downloadFile(blob, 'custom-name.txt');
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

function downloadFile(blob, filename) {
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
  document.body.removeChild(a);
}

通过这种方式，你可以轻松地修改下载文件的默认名称，使其更加符合你的需求。记住，这种方法适用于通过JavaScript动态下载文件的情况。

-- 展开阅读全文 --