XLSX client save from backend api response: binary string, application/octet-stream

Question

I need to save XLSX file on frontend that im getting from XHR to api.

In api response i got this headers:

    Content-Type: application/octet-stream
    content-disposition: attachment; filename = OrdersList-253CREATED0.xlsx

And part of response body:

PKõzMdocProps/core.xml­MKÄ0ïý!÷vVd-mQÅ++ÞB:¶Åæ$Úõßí®Å£ÇÉû¼ä\ïåHÞѺA«²$¥Ðí º>6xE×uB[ÜZmÐú -å*Ú{o 'zÜ%!V!yÑVrFÛáâwYDÏ[î9l±Ytôè+ùwe+¥y³ã,hàwÀ߬G+Ý9YȽj¦dÊg.lÄàéîöa^>ó\ ¤uDHy²Â"÷Øà(üÁ~%»üêºÙÐ:KÙ*fYÌ.,-²¼8ËKøÕ?9£¶õe8Kd{ ...

In my code, I tried many options:

1) replace type: "application/octet-stream" to application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

2) creating blob/file without s2ab function like this Blob([binary_string], ...)

let binary_string = response;

// Download using blob:
let ab = s2ab(binary_string),
    blob = new Blob(
                [ab],
                {type: "application/octet-stream"}
            );

let downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'test-blob.xlsx';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

// Download using file
let FileSaver = require('file-saver'),
            ab = s2ab(binary_string),
            file = new File(
                [ab], 
                "test-file.xlsx", 
                {type: "application/octet-stream"});

FileSaver.saveAs(file);

// s2ab function
function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}

Why i cant just use iframe, or a[download]? Because authorization header is required.

The file from response is correct, it opens when loading via postman, but when im trying to save it via js from XHR response it always corrupted.

I would be very grateful for the help :)

Answer 1

Im solved the problem. In this projects im using react, so ofc im used axios for ajax requests.

I think the problem in some axios settings or with axios itself;

Working code example on vanilla js:

var request = new XMLHttpRequest();
    request.open('GET', `http://localhost/api/get_xlsx`, true);
    request.setRequestHeader('Token', 'user_auth_token_needed_in_my_app');
    request.responseType = 'blob';

    request.onload = function(e) {
        if (this.status === 200) {
            var blob = this.response;
            if(window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveBlob(blob, 'test.xlsx');
            }
            else{
                var downloadLink = window.document.createElement('a');
                var contentTypeHeader = request.getResponseHeader("Content-Type");
                downloadLink.href = window.URL.createObjectURL(new Blob([blob], { 
                type: contentTypeHeader }));
                downloadLink.download = 'test.xlsx';
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
            }
        }
    };
    request.send();