How to open a CSV file created by POST

Question

I am trying to implement these seemingly simple requirements, but I cannot find a way:

• Single Page Application Using Angular JS
• DEPARTMENT (ish) back
• Reverse Copy Resource Opened via POST Request
• Resource parameters passed as JSON to the request body
• Resource creates CSV file
• When the user presses the button, generates a request with the correct JSON parameters in the body, sends it and allows the user to download the response as a file (requests the open / save as browser dialog)

The problem mainly lies in how to pass JSON as the request body? The most common method is to hide the HTML form to start the download, but the HTML form cannot send JSON data to the body. And I cannot find a way to invoke the load dialog using XMLHttpRequest ...

Any ideas?

I pointed out Angular, but any general JS solution is also very welcome!

Answer 1

I finally found a solution that satisfies all my requirements and works in IE11, FF and Chrome (and degrades the appearance of OK in Safari ...).

, Blob, , . IE ( API) Chrome/FF ( ).

, Angular :

myApp.factory('Download', [function() {
    return {
        openAsFile : function(response){

            // parse content type header
            var contentTypeStr = response.headers('Content-Type');
            var tokens = contentTypeStr.split('/');
            var subtype = tokens[1].split(';')[0];
            var contentType = {
                type : tokens[0],
                subtype : subtype
            };

            // parse content disposition header, attempt to get file name
            var contentDispStr = response.headers('Content-Disposition');
            var proposedFileName = contentDispStr ? contentDispStr.split('"')[1] : 'data.'+contentType.subtype;

            // build blob containing response data
            var blob = new Blob([response.data], {type : contentTypeStr});

            if (typeof window.navigator.msSaveBlob !== 'undefined'){
                // IE : use proprietary API
                window.navigator.msSaveBlob(blob, proposedFileName);
            }else{
                var downloadUrl = URL.createObjectURL(blob);

                // build and open link - use HTML5 a[download] attribute to specify filename
                var a = document.createElement("a");

                // safari doesn't support this yet
                if (typeof a.download === 'undefined') {
                    window.open(downloadUrl);
                }

                var link = document.createElement('a');
                link.href = downloadUrl;
                link.download = proposedFileName;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }
    }
}]);

$http. POST:

$http.post(url, {property : 'value'},  {responseType: 'blob'}).then(function(response){
    Download.openAsFile(response);
});

responseType. CSV- UTF-8 ( 16), , Excel , éè .. CSV Excel, Windows 1252, . responseType Blob .

: . CSV! - !