how to download PDF in angular 7?

1
votes

Request:

component.ts

    getRevenueReport() {

        const revenueReport = {
              dateFrom: '1/04/2019',
              dateTo: '23/04/2019',
       };

        this.apiService.getRevenueReport(revenueReport).subscribe( response => {
              console.log('response: ', response);
              const mediaType = 'application/pdf';

              const blob = new Blob(response, { type: mediaType });

              saveAs(blob, 'revenue.pdf');

            }, error => {
              console.log('error: ', error);
            });
    }

service.ts:

    getRevenueReport(revenueReport): any {
        const options = {
          headers: new HttpHeaders({
            'Content-Type': 'application/json',
            Accept: '*/*',
            Authorization: 'apiKey 8989jjjhjhgghghg765756',
          })
        };
        return this.http.post(this.BASE_API_URL + '/api/report', revenueReport, options);
      }

I am trying to download an PDF. I got the error

error: SyntaxError: Unexpected token % in JSON at position 0 at JSON.parse () at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:13601:51) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2781:31) at Object.onInvokeTask (http://localhost:4200/vendor.js:59081:33) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2780:60) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2553:47) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:2856:34) at invokeTask (http://localhost:4200/polyfills.js:4102:14) at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:4139:21) message: "Unexpected token % in JSON at position 0" stack: "SyntaxError: Unexpected token % in JSON at position 0↵ at JSON.parse ()↵ at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:13601:51)↵ at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2781:31)↵ at Object.onInvokeTask (http://localhost:4200/vendor.js:59081:33)↵ at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2780:60)↵ at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2553:47)↵ at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:2856:34)↵ at invokeTask (http://localhost:4200/polyfills.js:4102:14)↵ at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:4139:21)" proto: Error text: "%PDF-1.5↵%����↵3 0 obj↵<

2
javascriptjavaangularangular7
probably need to add a {responseType: 'blob'} in the request options.See if this helpful: stackoverflow.com/questions/53758280/… – Ashish Ranjan
i m not sure but i guess the data you are fetching is parsing in json(by default).. i think its normal behavior in new version of express .... can you have a look in that response object? – Himanshu Bansal
ok. i am trying with response type – Kumaresan Perumal
I believe you won't get much from your response in your subscribe() since you're sending a postrequest (unless you use {observe: 'response'} in the request options). What is printed in the console as the response? – Jojofoulk
responseType: blob is not working – Kumaresan Perumal

2 Answers

2
votes

Important - In request header add response type to 'arraybuffer' as 'json' otherwise it won't work

fetchPDF(url: string,data): Observable<any> {
this.getCredentials();
const authHeaders = this.createBasicAuthorizationHeader(this.credentials);
 return this.http.post(this.getApiUrl(url),data,{headers: authHeaders,'responseType'  : 'arraybuffer' as 'json'})
 }



exportPDF(){
this.httpRestClient.fetchPDF("download_salary_report", revenueReport ).subscribe(
  response => {
    var blob = new Blob([response], {type: 'application/pdf'});
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE');
    var trident = ua.indexOf('Trident/');
    var edge = ua.indexOf('Edge/');

  if(msie > 0 || trident > 0 || edge > 0){
    window.navigator.msSaveOrOpenBlob(blob,'revenue.pdf');
}
else if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = "revenue.pdf";
    document.body.appendChild(link);
    link.click();

    window.setTimeout(function() {
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
    }, 0);

}
  else{ 

  var link=document.createElement('a');
  link.href=window.URL.createObjectURL(blob);
  link.download="revenue.pdf";
  link.click();


  }

    },
  error=>{
  // show your error message here

  });


 }

Or you can use get request like this.

 window.open(appConfig.DOMAIN_NAME+"export_report_item_consumption/"+(itemName+ "," +this.datepipe.transform(this.payloadBean.fromDate, 'yyyy-MM-dd')
   + "," +this.datepipe.transform(this.payloadBean.toDate, 'yyyy-MM-dd')+","+this.currentuser.userID).toString(),'_blank' , "");

just append your variables after the url.

0
votes

you need to use map function

getRevenueReport(revenueReport): any {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        Accept: '*/*',
        Authorization: 'apiKey hjhjhjhu787878hjhjhjhzBa',
      })
    };
    this.http.post(this.BASE_API_URL + '/api/report', revenueReport, options).pipe(
      map((res) => {
         return new Blob([res.body], { type: res.headers.get('Content-Type') });
      })
    );
  }