What causes AJAX to sometimes output with incorrect encoding?

Question

What causes AJAX to sometimes output with incorrect encoding?

After receiving a file from a server using AJAX (Angular), the file, a simple XLSX document, is sent as shown below:

ob_start();
$file = \PHPExcel_IOFactory::createWriter($xls, 'Excel2007');
$file->save('php://output');
$response->setContent(ob_get_clean());
$response->headers->replace(array(
    'Content-Type'          => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    'Content-Disposition'   => 'attachment;filename=file.xlsx"'
));

When making a request from the frontend, the Accept header is used. The file is saved using angular-file-saver with FileSaver.js and Blob.js. However, the received file is corrupt and cannot be opened in Excel; its size is (for example) 12446 bytes, while Chrome's DevTools Network tab displays a Content-Length header of 7141 bytes.

How can this issue be resolved?

UPD: The request is sent in the following manner:

$http.get(baseURL + '/' + entity + '/export/?' + condition + sort, {
          headers: {'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; charset=utf-8'}
        });

The file is downloaded as follows:

var data = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
          FileSaver.saveAs(data, 'file.xlsx');

javascript ajax

Answer 1

Answer №1

To overcome the issue, I decided to use plain JavaScript AJAX instead of AngularJS. It seems there may be a problem with AngularJS and JQuery when handling binary responses.

Here is an alternative solution that should work:

var request = new XMLHttpRequest();
request.open('GET', 'http://yourserver/yourpath', true);
request.responseType = 'blob';

request.onload = function (e) {
    if (this.status === 200) {
        var blob = this.response;
        if (window.navigator.msSaveOrOpenBlob) {
            var fileNamePattern = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            window.navigator.msSaveBlob(blob, fileNamePattern.exec(request.getResponseHeader("content-disposition"))[1]);
        } else {
            var downloadLink = window.document.createElement('a');
            var contentTypeHeader = request.getResponseHeader("Content-Type");
            var b = new Blob([blob], { type: contentTypeHeader });
            downloadLink.href = window.URL.createObjectURL(b);
            var fileNamePattern = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            downloadLink.download = fileNamePattern.exec(request.getResponseHeader("content-disposition"))[1];
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
            window.URL.revokeObjectURL(b);
        }
    }
};
request.send();

This code snippet is inspired by this and this.

On a side note, I discovered that using new Blob([response.data], ...) results in almost double the size of response.data when response.data is not returned as a blob, but as text/plain or

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

. To address this, you should pass it an array of bytes instead:

    var i, l, d, array;
    d = this.result;
    l = d.length;
    array = new Uint8Array(l);
    for (var i = 0; i < l; i++){
        array[i] = d.charCodeAt(i);
    }
    var b = new Blob([array], {type: 'application/octet-stream'});
    window.location.href = URL.createObjectURL(b);

This code reference can be found here.

Given that the AJAX response may not be correct when using AngularJS, following this method will not provide a valid xlsx file. It's recommended to stick with vanilla JavaScript in this scenario.

Answer 2

To overcome the issue, I decided to use plain JavaScript AJAX instead of AngularJS. It seems there may be a problem with AngularJS and JQuery when handling binary responses.

Here is an alternative solution that should work:

var request = new XMLHttpRequest();
request.open('GET', 'http://yourserver/yourpath', true);
request.responseType = 'blob';

request.onload = function (e) {
    if (this.status === 200) {
        var blob = this.response;
        if (window.navigator.msSaveOrOpenBlob) {
            var fileNamePattern = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            window.navigator.msSaveBlob(blob, fileNamePattern.exec(request.getResponseHeader("content-disposition"))[1]);
        } else {
            var downloadLink = window.document.createElement('a');
            var contentTypeHeader = request.getResponseHeader("Content-Type");
            var b = new Blob([blob], { type: contentTypeHeader });
            downloadLink.href = window.URL.createObjectURL(b);
            var fileNamePattern = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            downloadLink.download = fileNamePattern.exec(request.getResponseHeader("content-disposition"))[1];
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
            window.URL.revokeObjectURL(b);
        }
    }
};
request.send();

This code snippet is inspired by this and this.

On a side note, I discovered that using new Blob([response.data], ...) results in almost double the size of response.data when response.data is not returned as a blob, but as text/plain or

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

. To address this, you should pass it an array of bytes instead:

    var i, l, d, array;
    d = this.result;
    l = d.length;
    array = new Uint8Array(l);
    for (var i = 0; i < l; i++){
        array[i] = d.charCodeAt(i);
    }
    var b = new Blob([array], {type: 'application/octet-stream'});
    window.location.href = URL.createObjectURL(b);

This code reference can be found here.

Given that the AJAX response may not be correct when using AngularJS, following this method will not provide a valid xlsx file. It's recommended to stick with vanilla JavaScript in this scenario.

What causes AJAX to sometimes output with incorrect encoding?

Answer №1

Similar questions

I can't seem to get anything to show up on my React

Utilize Web3.js to interact with a specific function in a deployed smart contract on the Ethereum blockchain from a React application

The process of implementing web-based online diagramming software involves a strategic approach to designing and integrating various

AJAX is not meeting my expectations

Verifying Initialization Before Destructing jQuery File Upload

Using more than one class at a time is causing issues

Error: An issue occurred with the tasks in the Gruntfile.js file

Experiencing a lack of defined or no outcome when outputting the API callback

What steps do I need to take in order to include REMOVE and EDIT buttons in my table?

The v-for directive is displaying my list in a single row with multiple columns instead of in a single column with multiple rows

Adjust the language code in a URL using JavaScript or Node.js

Ways to ensure the text on my website scrolls into view as the user navig

What is causing the initial activation of the <button> within a form?

The ng-controller directive is not functioning accurately

I'm only seeing output on two of my input boxes - what's going on?

What is the method for including an input field beside the y-axis label in Chart.js?

Can Cell be rendered into a targeted element?

How to globally register components in Vuejs located in subdirectories

What methods can be used to search within one array in order to filter another array contained in a list?

Using Jquery to locate the next div element