Filesaver.js: Open downloaded file using file saver blob issue

[meenucoditas]

I am downloading file using 'FileSaver'.But i am not able to open that file.

Here is the code which i have wriiten for downloading a file :

import * as FileSaver from "file-saver"; 

downloadFile(){
    var file = {{someUrl}};
    let fileName = 'HTML_Basics.pdf';
    var blob = new Blob([file], {type: "application/pdf"});
    FileSaver.saveAs(blob,fileName);
}

File is downloaded successfully .When i click on downloaded file , an error occured which says : 'Unable to open document' ..Attached is the screenshot for reference.

Strange part in displayed error is i have downloaded a pdf file .But it says 'File type plain/text not supported'

Any suggestions are welcome.

[jimmywarting]

Are the files coming from your server?

[meenucoditas]

Yes.
I have file url and name

[jimmywarting]

If the file is coming from your server then you are better of setting the content-disposition attachment header in the response, it will make the browser download the file.

filesaver is best suited for client-side generated stuff...

[bkarv]

@meenucoditas did you end up finding a solution for this? I have same issue of corrupts files except for jpegs. My code is below:

this.http.get(url)
.map((res) => {
            console.log('Blob',res);
            let obj: any = res['_body'];
            return new Blob([obj], {type: 'image/jpeg'});
          })
          .subscribe(blob => {
            console.log('Blob',blob);
            FileSaver.saveAs(blob,'test.jpg')
          }, error => {
              console.log(error);
          })
        }); 

If I console res it looks like this:

_body: "%PDF-1.3↵%����
↵28 0 obj↵<<↵/Linearized 1↵/L 246496 ↵/O 30 ↵/E 9249 ↵/N 5↵/T 245878 ↵/H [ 440 185 ] ↵>…"

headers: Headers {_headers: Map, _normalizedNames: Map, append: function, delete: function, forEach: function, …}

ok: true

status: 200

statusText: "OK"

type: 2

url: "https://s3.ap-southeast-2.amazonaws.com/****…"

[jimmywarting]

@bkarv and @meenucoditas set the responseType to be a blob

read this: https://github.com/eligrey/FileSaver.js/wiki/Saving-a-remote-file.

[bkarv]

Below solution resolved my issue. In short you have to add {responseType: ResponseContentType.Blob} as part of the request.

https://stackoverflow.com/questions/37046133/pdf-blob-is-not-showing-content-angular-2/39657478#comment84643231_39657478