Push File Download on Ajax POST Nodejs Express

Question

On Node Server i have this code. Its basically sending the browser POST data to api server and recieves a file as chunk data and the same data is send back to browser via pipe response. But the issue is the api reponse is correct and i can write the file using nodejs locally but it doesnt push download file in browser

router.post('/MyURLOnNODE', function (req, res) {
    var MyJsonData = { some Data        };

    res.writeHead(200, {'Content-disposition': 'attachment; filename=fileArchive.tgz','Content-Type': 'application/force-download'}); 
    try {
         request({
            url: 'SomeAPI Url', //URL to hit
            method: 'POST',
            json: MyJsonData
            }).pipe(res);
    } catch(e) {
        console.log("Pipe error",e);
    }
    console.log("File Streaming Called ",MyJsonData)            
    }
);

Client Side Code...This was an attempt to create a blob and use it on urlObject. but the downloaded file is corrupted when i checked in hex.

$http({
    method: 'POST',
    url: 'MyURLOnNODE',
    data: PostData, //forms user object
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(function (data) {
    var response=data.data;       
    var id = Flash.create('success', "Folder Archieved", 5000);
    var a = document.getElementById('arch');
     a.href = URL.createObjectURL(new Blob([response]));
     a.download = "FolderMe.tgz";
     a.type='application/octet-stream '
     a.click(); 
}

So is there any solution to this? either on NodeJs Side or On browser

Update: https://stackoverflow.com/a/7969061/7078299

This thread says its hard to convert an ajax request to download file. So i need to work on client on using urlobject. But blob isnt working with stream data. How to solve it

Answer 1

You can use a node module called file-saver and use saveAs method provided by it and download the file on the client side.

First npm install file-saver ;

You can use it as

import {saveAs} from 'file-saver';

and inside your then block you need to add this line

saveAs(new Blob([response]), <your file name>)

It will auto-download your file.

Answer 2

i fixed the issue by adding a reponseType on Client Side Code. Now the blob and ObjectUrl works correctly

$http({
        method: 'POST',
        url: 'MyUrl',
        data: PostData, //forms user object
        headers: {
            'Content-Type': 'application/json'
        },
        responseType: 'arraybuffer'
    })
    .then(function (response) {
        console.log(response);
        var headers = response.headers();
        var blob = new Blob([response.data],{type:headers['content-type']});
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = "Archive.tgz";
        link.click();
    });