在angularjs中使用二进制数据响应(zip文件)的base64预览 [英] Use the base64 preview of the binary data response (zip file) in angularjs

问题描述

我总是在下载的zip文件 C:\ Users \ me \ Downloads \ test.zip中收到此错误:存档意外结束

I always get this error in the downloaded zip file 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

调用的响应是二进制的(我认为).此处的二进制内容

The response of the call is a binary (I think). Binary Content Here

但是预览是base64. Base64 Content .这是正确的.我验证的方式是使用此小提琴.

But the preview is a base64. Base64 Content. And it is the correct one. The way I verify it is by using this fiddle.

您可以在此处

我将base64内容放在此行中 var sampleBytes = base64ToArrayBuffer(''); 下载的zip可以很好地打开.

I put the base64 content in this line var sampleBytes = base64ToArrayBuffer(''); And the zip downloaded just opens fine.

到目前为止我已经尝试过的事情.

Things I have tried so far.

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

1. Adding this headers to the GET call

var标头= {接受:应用程序/八位字节流"，responseType:"blob"，};但是我在飞行前响应中得到请求标头字段responseType被Access-Control-Allow-Headers不允许.

var headers = { Accept: 'application/octet-stream', responseType: 'blob', }; But I get Request header field responseType is not allowed by Access-Control-Allow-Headers in preflight response.

我们正在AngularJS项目中使用已经 ajax.service.js .

We're using an already ajax.service.js in our AngularJS project.

1. 通过此答案

var blob = new Blob([yourBinaryDataAsAnArrayOrAsAString]，{type:"application/octet-stream"});;var fileName ="myFileName.myExtension";saveAs(blob，fileName);

我尝试过的其他事情没有列出.再次找到问题后，我将对其进行编辑

There are other things that I have tried that I have not listed. I will edit the questions once I find them again

但是我现在在哪里. preview 是二进制文件的正确base64.是否可以使用它代替二进制文件?(如果是这样，我将找不到我测试过的其他方法)我尝试了一些 binary至base64 转换器，但是它们不起作用.

But where I'm current at right now. The preview is correct base64 of the binary file. Is it possible to use that instead of the binary? (If it is I will not find the other methods that I've tested) I tried some binary to base64 converters but they don't work.

推荐答案

因此，对于这个特定的调用，我只是使用我们拥有的 ajax.service.js 抛弃了.

So I just went and ditched using the ajax.service.js, that we have, for this specific call.

我使用了此答案中的 xhr 代码段.我刚刚添加了调用所需的标头:令牌和auth内容.

I used the xhr snippet from this answer. I just added the headers necessary for our call: tokens and auth stuff.

我将此代码段用于转换.

代码如下:

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

这篇关于在angularjs中使用二进制数据响应(zip文件)的base64预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！