How to save following content as PDF in Angularjs using FileSaver.js - angularjs

Question

I am unable to save this content as proper PDF using FileSaver.js
this is Angular code
$http(
{ url:root.api_root+'/appointments/generatePDF/'+$route‌​Params.id,
method:'GE‌​T'
}).then(function(r‌​es){ //
$log.log(res.data);
var blob = new Blob([res.data], { type: 'application/pdf' });
window.open(res.data);
// saveAs(blob, 'file.pdf');
});
this is TCPDF Backend code
$pdf->Output("php://output", 'F');
echo file_get_contents("php://output");

Answer 1

When downloading binary data such as PDF files, it is important to set the responseType property:
$http(
{ url:root.api_root+'/appointments/generatePDF/'+$route‌​Params.id,
method:'GE‌​T',
//IMPORTANT
responseType: 'blob'
}).then(function(r‌​es){ //
$log.log(res.data);
//var blob = new Blob([res.data], { type: 'application/pdf' });
//window.open(res.data);
var blob = res.data;
saveAs(blob, 'file.pdf');
});
If the responseType property is omitted, the XHR API defaults to processing the data as UTF-8 text. The process of decoding the data as UTF-8 text will corrupt binary files such as PDF or images.
For more information, see MDN Web API Reference - XHR ResponseType

Answer 2

Dependencies
AngularJS
FileSaver.js
Blob.js
Installation
Using bower: bower install angular-file-saver
Using npm: npm install angular-file-saver
Basic usage
Include ngFileSaver module into your project;
Pass both FileSaver and Blob services as dependencies;
Create a Blob object by
passing an array with data as the first argument and an object with set of options
as the second one: new Blob(['text'], { type: 'text/plain;charset=utf-8' });
Invoke FileSaver.saveAs with the following arguments:
data Blob: a Blob instance;
filename String: a custom filename (an extension is optional);
disableAutoBOM Boolean: (optional) Disable automatically provided Unicode text encoding hints.
You can do so by injecting FileSaver and Blob into the controller and then using the syntax as shown below:
angular.module('sample',['ngFileSaver'])
.controller('ConsultationDetailsController', ['$scope', 'FileSaver', 'Blob', function($scope, FileSaver, Blob){
$scope.download = function (fileName) {
$scope.isLoading = true;
downloadHttpService.getDocument(fileName)
.then(function (response) {
var data = response.data;
var status = response.status;
var header = response.headers();
var fileType = header['content-type'];
var blob = new Blob([data], { type: fileType });
FileSaver.saveAs(blob, originalFileName);
})
.catch(function (resp) {
// show error
})
.finally(function (data) {
// execute finally block.
});
};
}]);
if you want only the pdf type then you can hard coded define
fileType as 'application/pdf' like this var fileType= 'application/pdf';
Hope this solves your problem :)

Answer 3

Its work for me. Just try it.
$http(
{ url:root.api_root+'/appointments/generatePDF/'+$route‌​Params.id,
method:'GE‌​T'
}).then(function(r‌​es){
$log.log(res.data);
saveAs('data:application/pdf;base64,' + res.data, 'file.pdf');
});