前端下载文件如何使用content-disposition的值作为文件名称

在前端通过JavaScript下载文件时，如果你想要使用`Content-Disposition`头信息中的文件名，通常是在发起HTTP请求时设置响应头部。这个字段是由服务器发送的，包含了推荐的文件名供浏览器使用。以下是使用fetch API的一个示例：

fetch('your-url-here', {
  method: 'GET',
  headers: {
    // 设置自定义的Content-Disposition
    'Accept': 'application/octet-stream',
    'Content-Disposition': `attachment; filename="${encodeURIComponent(fileName)}"`, // fileName是你想给的文件名
  },
})
.then(response => {
  // 检查状态码是否表示成功（200-299）
  if (response.ok) {
    // 使用response.blob()创建Blob对象，然后触发下载
    return response.blob();
  } else {
    throw new Error(`Error ${response.status}: ${response.statusText}`);
  }
})
.then(blob => {
  let aLink = document.createElement('a');
  aLink.href = URL.createObjectURL(blob);
  aLink.download = fileName;
  document.body.appendChild(aLink); // 或者可以考虑隐藏a标签
  aLink.click(); // 触发下载
  URL.revokeObjectURL(aLink.href); // 下载完成之后释放资源
})
.catch(error => console.error('Error:', error));

在这个例子中，`Content-Disposition`字段设置了为`attachment`，表明这是一个需要用户保存的文件，并使用了编码过的文件名作为`filename`属性的值。