使用angularjs中二进制数据响应(zip文件)的base64预览

时间:2018-03-01 14:04:50

标签: javascript angularjs

我总是在下载的zip文件C:\Users\me\Downloads\test.zip: Unexpected end of archive

中收到此错误

我目前的代码是:

var blob = new Blob([data], { // data here is the binary content
    type: 'octet/stream',
});
var zipUrl = window.URL.createObjectURL(blob);
var fileName = orderNo;
fileName += '.zip';
downloadFile(null, fileName, null, zipUrl, null); // just creates a hidden anchor tag and triggers the download

呼叫的响应是二进制(我认为)。 Binary Content Here

但预览是base64。 Base64 Content。这是正确的。我验证它的方法是使用此fiddle

您可以参考网络here

的屏幕截图

我将base64内容放在此行中var sampleBytes = base64ToArrayBuffer('');并且下载的zip文件打开正常。

到目前为止我尝试过的事情。

  1. 将此标题添加到GET调用

    var headers = {     接受:'application / octet-stream',     responseType:'blob', }; 但我得到Request header field responseType is not allowed by Access-Control-Allow-Headers in preflight response.

  2. 我们在AngularJS项目中使用了ajax.service.js

    1. From this answer
    2. var blob = new Blob([yourBinaryDataAsAnArrayOrAsAString], {type: "application/octet-stream"}); var fileName = "myFileName.myExtension"; saveAs(blob, fileName);

      我还尝试过其他一些我未列出的内容。我会在再次找到问题后编辑问题

      但我现在正处在哪里。 preview是二进制文件的正确base64。是否可以使用它而不是二进制? (如果是,我将找不到我测试的其他方法)我尝试了一些binary to base64转换器,但它们不起作用。

1 个答案:

答案 0 :(得分:0)

所以我只是使用我们拥有的ajax.service.js为这个特定的电话而放弃了。

我使用了来自this answerxhr代码段。我刚刚添加了调用所需的标头:令牌和授权。

我使用this code snippet进行转化。

代码如下:

fetchBlob(url, function (blob) {
    // Array buffer to Base64:
    var base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(blob)));
    var blob = new Blob([base64ToArrayBuffer(base64)], {
        type: 'octet/stream',
    });
    var zipUrl = window.URL.createObjectURL(blob);
    var fileName = orderNo;
    fileName += ' Attachments ';
    fileName += moment().format('DD-MMM-YYYY');
    fileName += '.zip';
    downloadFile(null, fileName, null, zipUrl, null); // create a hidden anchor tag and trigger download
});

function fetchBlob(uri, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', uri, true);
    xhr.responseType = 'arraybuffer';
    var x = AjaxService.getAuthHeaders();
    xhr.setRequestHeader('auth_stuff', x['auth_stuff']);
    xhr.setRequestHeader('token_stuff', x['token_stuff']);
    xhr.setRequestHeader('Accept', 'application/octet-stream');

    xhr.onload = function (e) {
        if (this.status == 200) {
            var blob = this.response;
            if (callback) {
                callback(blob);
            }
        }
    };

    return xhr.send();
};

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;
}