Javascript 如何在Javascript中保存zip文件的二进制数据？

How to save binary data of zip file in Javascript?

提问by Nishant Singh

I am getting below response from AJAX respose:

我收到以下来自 AJAX respose 的回复：

this is response of zip file. please let me know how to save this filename.zip in Javascript. Inside the ZIP there is PDF file.

这是 zip 文件的响应。请让我知道如何在 Javascript 中保存这个 filename.zip。在 ZIP 里面有 PDF 文件。

MY code is like this:

我的代码是这样的：

$.ajax({

    url: baseURLDownload + "/service/report-builder/generateReportContentPDF",
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
        xhr.responseType = 'arraybuffer'
    },
    type: "POST",
    data: JSON.stringify(parameter),
    contentType: "application/json",
    success: function(result) {
        console.log("ssss->"+result);
        var base64String = utf8_to_b64(result);
        //window.open("data:application/zip;base64,"+base64String); // It will download pdf in zip
        var zip = new JSZip();
        zip.add("PDFReport.pdf", result);
        content = zip.generate();
        location.href="data:application/zip;base64," + content;
        $.mobile.loading('hide');

    },
    error: function(xhr){
        console.log("Request Status: " + xhr.status + " Status Text: " + xhr.statusText + " " + xhr.responseText);
        $.mobile.loading('hide');
        showAlert("Error occured. Unable to download Report", "Message", "OK");

    }
});

RESPOSE Console.log("ssss->"+result);

RESPOSE Con​​sole.log("ssss->"+result);

PK??Q??F???????????????/crt_pdf_10204725.pdf??uX\M?8|p???????;w?@p ??Bp????;|C???w??????=O???]]?%?N?????#+?reup??????????Y????????J????3)? O??C????F?M?P?&?????rA?@??7T.??z(%h??x?x0?0Z?-i??%q?e?M?????i?"?c??-/??j??齔/?L瞄?0? ?? >?o??[??6 ??n??s?$? ?#>? '??wT?? ???3?36DK?+???t6 ??r??sA:???x?<>n??????'U??RLqA+?????BM??:4?P?}???:?}?P?????F)?9-?W0???2?{x??#2v8N.$V?>X=/?+?c}?????\y???\*?J\?? ???90?T?L? 3p???*Sfj(???PWWz??O?s?9]&????iO|?9?;?5???dW?cl% ?%;????u???%[?5??????Q]$??[L>???yXg?9??2+&,iFs?Q?????u?.?E(?>W??+??M ?E??????i|???k?k?c蟴CcG?j??4s|x ?F1?}??Y??,29?0M=-O????m\L??y??^On^???\???u??a???F9:zc?Sy?-?g??fu?n?C?T:{ ??4&/ ??LM9?98? ?&Pnc?!??m?r?~??)74?04??0?0??????M?~"??.ikjG??M?-

PK??Q??F???????????????/crt_pdf_10204725.pdf??uX\M?8|p???????;w?@p ??Bp ????;|C???w??????=O???]]?%?N?????#+?reup??????????Y?? ??????J????3)? O??C????F?M?P?&?????rA?@??7T.??z(%h??x?x0?0Z?-i??%q?e ? M?????i?"?c??-/??j??龀/?L瞄?0 ??6 ??n??s?$? ?#>? '??wT?? ???3?36DK?+???t6 ??r??sA:???x?<>n??????'U??RLqA+?????BM??:4?P?}???:?}?P?????F)?9-?W0???2?{x??#2v8N.$V?>X=/?+?c}?????\y???\*?J\?? ???90?T?L? 3p???*Sfj(???PWWz??O?s?9]&???? >?o??[ ???iO|?9?;?5??? dW?cl% ?%;????u???%[?5??????Q]$??[L>???yXg?9??2+&,iFs?Q?? ?u?.?E(?>W??+??M ?E ???k?k?c蟴CcG?j??4s|x ?F???? i| 1?}??Y??,29?0M=-O??m\L ??y??^On^???\???u??a???F9:zc?Sy?-?g??fu?n?C?T:{??4&/??LM9? 98??&Pnc?!??m?r?~??)74?04??0?0??????M?~"??.ikjG??M?-

回答by Nishant Singh

Finally I got answer of my question:

最后我得到了我的问题的答案：

• https://github.com/eligrey/Blob.js/
• https://github.com/eligrey/FileSaver.js/

• https://github.com/eligrey/Blob.js/
• https://github.com/eligrey/FileSaver.js/

Here is the code:

这是代码：

var xhr = new XMLHttpRequest();
xhr.open("POST", baseURLDownload + "/service/report/QCPReport", true);
xhr.setRequestHeader("Content-type","application/json");
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // alert("Failed to download:" + xhr.status + "---" + xhr.statusText);
        var blob = new Blob([xhr.response], {type: "octet/stream"});
        var fileName = "QCPReport.zip";
        saveAs(blob, fileName);
    }
}
xhr.responseType = "arraybuffer";
xhr.send(JSON.stringify(QCPParameter));

回答by Below the Radar

No dependancy.

没有依赖性。

Compatible with IE 10,11, Chrome, FF and Safari:

与 IE 10,11、Chrome、FF 和 Safari 兼容：

function str2bytes (str) {
   var bytes = new Uint8Array(str.length);
   for (var i=0; i<str.length; i++) {
      bytes[i] = str.charCodeAt(i);
    }
    return bytes;
}

var xhr = new XMLHttpRequest();
xhr.open("POST", baseURLDownload + "/service/report/QCPReport", true);
xhr.setRequestHeader("Content-type","application/json");
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // alert("Failed to download:" + xhr.status + "---" + xhr.statusText);
        var blob = new Blob([str2bytes(xhr.response)], {type: "application/zip"});
        var fileName = "QCPReport.zip";
        if (navigator.msSaveOrOpenBlob) {
            navigator.msSaveOrOpenBlob(blob, filename);
        } else {
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display:none";
            var url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = filename;
            a.click();
            window.URL.revokeObjectURL(url);
            a.remove();
        }
    }
}
xhr.responseType = "arraybuffer";
xhr.send(JSON.stringify(QCPParameter));

回答by ego

Axios implementation:

Axios 实现：

const url = 'https://www.example.com/download-zip'

// Payload, eg list of docs to zip
const payload = { documents: ['id1', 'id2', 'id3'] }

// Axios options
const axiosOptions = {
  responseType: 'arraybuffer',
  headers: {
    'Content-Type': 'application/json'
  }
}

// Fetch data and save file
axios
  .post(url, payload, axiosOptions)
  .then((response) => {
    const blob = new Blob([response.data], {
      type: 'application/octet-stream'
    })
    const filename = 'download.zip'
    saveAs(blob, filename)
  })
  .catch((e) => {
    // Handle error
  })
})

回答by Vishal Dindalkop

Here is my Answeryou can avoid using blob and avoid using Filesaver.

这是我的答案，您可以避免使用 blob 并避免使用 Filesaver。

This is how i wrote for one of my project using GET Method

这就是我使用 GET 方法为我的一个项目编写的方式

var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", url, true);
xmlHttp.setRequestHeader("Content-type","application/json");
xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xmlHttp.responseType= 'blob';

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        const downloadUrl = window.URL.createObjectURL(xmlHttp.response);
        const link = document.createElement('a');
        link.setAttribute('href', downloadUrl);
        link.setAttribute('download', `filename.zip`);
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(link.href);
        document.body.removeChild(link);
    }
}
xmlHttp.responseType = "arraybuffer";
xmlHttp.send();

回答by IonicBurger

For those of you using fetch, you can do this doing something like this.

对于那些使用 fetch 的人，你可以做这样的事情。

fetch(url, config).
  .then((response) => {
    return response.arrayBuffer()
  })
  .then((data) => handleData(data))

In handleData, you will then instantiate the Blob object to handle the zip data.

在 handleData 中，您将实例化 Blob 对象以处理 zip 数据。

回答by Scott Hunter

There are libraries (zip.js comes to mind) for handling this sort of thing, assuming you want to get at what is in the zip file. If you just want to save the zip file, you would treat it like any other file.

假设您想了解 zip 文件中的内容，有一些库（想到 zip.js）可以处理此类事情。如果您只想保存 zip 文件，您可以像对待任何其他文件一样对待它。