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

问题

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");

回答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

回答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 :)

回答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');
});

来源：https://stackoverflow.com/questions/43715032/how-to-save-following-content-as-pdf-in-angularjs-using-filesaver-js