Javascript 无法将八位字节流的响应数据转换为Zip文件并下载

我正在尝试从AJAX GET请求下载包含JSON文件的Zip文件

响应标题格式：

Connection: keep-alive
content-disposition: attachment;filename=exportedFiles_ 1.6.0_20200731160652.zip
Content-Length: 4496
Content-Type: application/octet-stream
Date: Fri, 31 Jul 2020 10:36:52 GMT

“网络”选项卡中的数据预览：

AJAX调用和成功函数：

$.ajax({
      type: "GET",
      url: "/download/" ,
      async: false,
      success: function (data,status, xhr) {          
      var filename = xhr.getResponseHeader('content-disposition').split("filename=")[1];;
      var blob = new Blob([data], {type: "octet/stream"})
       saveAs(blob, filename); 
      }
    });

它正在保存Zip文件，但当我尝试打开Zip文件时，它会显示“Windows无法打开文件夹，压缩的Zip无效。”

---

将响应类型设置为arraybuffer:

dataType: 'arraybuffer'

---

为接收到的文档实现一个

Axios

处理程序，即数据格式

octect流

， 数据可能看起来很奇怪

PK某物jbxfgfvddvbdfbvh3436436fdkln

作为其八位字节流格式，您可能最终用此数据创建的文件可能已损坏，

{responseType:'blob'}

将数据转换为可读格式

axios.get("URL", {responseType: 'blob'})
     .then((r) => {
         let fileName =  r.headers['content-disposition'].split('filename=')[1];
         let blob = new Blob([r.data]);
         window.saveAs(blob, fileName);             
      }).catch(err => {
        console.log(err);
      });

您可能尝试过这样失败的解决方案，

window.saveAs（blob，'file.zip'）

将尝试将文件另存为zip，但不起作用

const downloadFile = (fileData) => {
    axios.get(baseUrl+"/file/download/"+fileData.id)
        .then((response) => {
            console.log(response.data);
            const blob = new Blob([response.data], {type: response.headers['content-type'], encoding:'UTF-8'});
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = 'file.zip';
            link.click();
        })
        .catch((err) => console.log(err))
}
const downloadFile = (fileData) => {
axios.get(baseUrl+"/file/download/"+fileData.id)
    .then((response) => {
        console.log(response);
        //const binaryString = window.atob(response.data)
        //const bytes = new Uint8Array(response.data)
        //const arrBuff = bytes.map((byte, i) => response.data.charCodeAt(i));
        //var base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(response.data)));
        const blob = new Blob([response.data], {type:"application/octet-stream"});
        window.saveAs(blob, 'file.zip')
        // const link = document.createElement('a');
        // link.href = window.URL.createObjectURL(blob);
        // link.download = 'file.zip';
        // link.click();
    })
    .catch((err) => console.log(err))
}
function base64ToArrayBuffer(base64) {
    var binaryString = window.atob(base64);
    var binaryLen = binaryString.length;
    var bytes = new Uint8Array(binaryLen);
    for (var i = 0; i < binaryLen; i++) {
        var ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
    };

    return bytes;
}

---

将不必要地继续打开新选项卡，用户可能必须为工作设置

允许弹出窗口

。如果用户希望同时下载多个文件，那么首先使用解决方案，或者如果不尝试其他解决方案，也面临类似问题，该怎么办，您已经解决了这个问题吗？什么数据类型在哪里写这个以及如何解决这个问题？在ajax请求中：

$.ajax（{type:“GET”，url:“/download/”，async:false，success:function（data，status，xhr）{var filename=xhr.getResponseHeader（'content-disposition'）。split（“filename=”）[1]；var blob=new blob（[data]，{type:“octet/stream”}）saveAs（blob，filename）；}，数据类型：'arraybuffer'}）

dataType参数用于从服务器“期望”返回自定义类型。

window.open("URL")