web-dev-qa-db-ja.com

JavascriptでZipファイルのバイナリデータを保存するには？

AJAX respose：

これはZipファイルの応答です。このfilename.ZipをJavascriptで保存する方法を教えてください。 Zipの中にPDFファイルがあります。

私のコードは次のようなものです：

_$.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 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�0��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]&����i|�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 �F_1�}��Y��、29�0M=-O����m\L��y��^ On ^���\���u� �a���F9：zc�Sy�-������n�C�T：{��4＆/��LM9�98��＆Pnc�！��m�r�〜��）74 �04��0�0������M�〜 "��.ikjG��M�-

javascriptbinaryzip
17
Nishant Singh

最終的に私は私の質問の答えを得ました：

コードは次のとおりです。

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));
21
Nishant Singh

依存関係はありません。

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));
4
Below the Radar

Fetchを使用している人は、このようなことをしてこれを行うことができます。

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

HandleDataで、Blobオブジェクトをインスタンス化してZipデータを処理します。

0
IonicBurger

この種のことを処理するためのライブラリがあります（Zip.jsが思い浮かびます）。 Zipファイルのみを保存する場合は、他のファイルと同様に扱います。

0
Scott Hunter

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
  })
})
0
bruddha