Angularjs: how to properly save a blob pdf file recieved from the server

Question

The recieved file goes through $http and i need to save the response data into a file, i am using angular-file-saver, the recieved files are pdf docx, but viewing the saved pdf file shows nothing on the reader, while other downloaders like PostMan does save it right.

the function that takes care of saving has this code:

function saveFile(data, header){
    var extensions = {
        "application/pdf": ".pdf",
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document": ".docx"
    }

    var file = new Blob([data], {type: header});

    FileSaver.saveAs(file, documentsShow.document.name + extensions[header]);
}

data is the body data retrieved from $http success and header is the Content-Type also recieved from $http response

in case if it's needed, the $http code is like this:

$http({
    method: "GET",
    data: data,    //This is sometimes null but it's not relevant for the application
    url: "path/to/download"
}).then(function(data){
    saveFile(data.data, data.header("Content-Type"));
});

Phil · Accepted Answer · 2016-10-24 00:01:44Z

3

Main problem I see here is that Angular will still be trying to parse the response as JSON.

You can modify this so it resolves with a Blob object

$http.get('path/to/download', {
    responseType: 'blob'
}).then(function(res) {
    FileSaver.saveAs(res.data, ...)
});

FYI, data is not used in GET requests.

answered Oct 24, 2016 at 0:01

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs: how to properly save a blob pdf file recieved from the server

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related