前端 如何 attachment; filename=zhangheng.7z contentDisposition 获取得到 zhangheng.7z

在Web开发中，前端获取服务器返回的文件通常需要通过HTTP响应中的特定头部来处理。在这个场景中，你提到的`contentDisposition`是一个HTTP响应头部字段，它告诉浏览器如何处理响应的内容。通常，`contentDisposition`头部的值可能是`attachment`，并且会带有文件名，例如`filename=zhangheng.7z`，这表示服务器希望浏览器提示用户下载这个文件，而不是直接在浏览器中打开它。

要在前端获取这样的文件，通常的做法是在后端设置好正确的`contentDisposition`头部，并且发送文件数据给前端，前端接收到这个响应后，可以通过如下几种方法之一来处理：

1. 使用`<a>`标签和`download`属性：

   <a href="下载链接" download>下载</a>

你需要将`下载链接`替换成实际的后端文件下载接口地址。点击该链接时，浏览器会自动下载文件。

2. 使用JavaScript动态创建`<a>`标签：

   var link = document.createElement("a");
   link.href = '下载链接';
   link.download = 'zhangheng.7z';
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);

这段代码创建了一个临时的`<a>`标签，并模拟点击来触发下载。

3. 使用Ajax请求下载文件：

   var xhr = new XMLHttpRequest();
   xhr.open('GET', '下载链接', true);
   xhr.responseType = 'blob'; // 设置响应类型为blob，以便以二进制形式处理响应数据

   xhr.onload = function (e) {
     if (this.status == 200) {
       var blob = this.response; // 获取响应数据作为blob对象

       // 创建下载链接
       var url = window.URL.createObjectURL(blob);
       var a = document.createElement('a');
       a.style.display = 'none';
       a.href = url;
       a.download = 'zhangheng.7z';
       document.body.appendChild(a);
       a.click();
       window.URL.revokeObjectURL(url);
     }
   };

   xhr.send();

这段代码通过Ajax请求文件，并在请求成功后创建一个隐藏的下载链接来触发文件下载。