CODEWITHSUNDEEP
node.jsangularexpress
Mr. Learner
Mr. Learner

Reputation: 1038

Angular 5 - Node/Express - not able to download pdf

am trying to download pdf file from local folder that structures like assets/test.pdf.

server.js

app.get('/ePoint', (req,res)=>{
 // some dumb code :P
});

demo.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Headers } from '@angular/http';
import {Observable} from 'rxjs'; 
fileDownload() {
    const headers = new HttpHeaders();
    headers.append('Accept', 'application/pdf');
    this._http.get('http://localhost:3000/ePoint',  { headers: headers })
      .toPromise()
      .then(response => this.saveItToClient(response));
  }
    private saveItToClient(response: any) {
    const contentDispositionHeader: string = response.headers.get('Content-Disposition');
    const parts: string[] = contentDispositionHeader.split(';');
    const filename = parts[1].split('=')[1];
    const blob = new Blob([response._body], { type: 'application/pdf' });
    saveAs(blob, filename);
  }

i dont know where i did mistake. in browser network console. its shows 200 ok. but in normal browser console shows as below attachment

enter image description here enter image description here

Note: i referred for ts file from here

helps much appreciated

Upvotes: 3

Views: 2149

Answers (1)

Erdogan Alper
Erdogan Alper

Reputation: 135

try this...

component.ts

downloadDocument(documentId: string) {
    this.downloadDocumentSubscription = this.getService.downloadScannedDocument(documentId).subscribe(
      data => {
        this.createImageFromBlob(data);
      },
      error => {
        console.log("no image found");
        $("#errorModal").modal('show'); //show download err modal
      });
  }

  createImageFromBlob(image: Blob) {
    console.log("mylog", image);
    if (window.navigator.msSaveOrOpenBlob) // IE10+
      window.navigator.msSaveOrOpenBlob(image, "download." + (image.type.substr(image.type.lastIndexOf('/') + 1)));
    else {
      var url = window.URL.createObjectURL(image);
      window.open(url);
    }
  }

service.ts

downloadScannedDocument(documentId: string): Observable<any> {

    let params = new HttpParams();
    if (documentTypeParam == false)
        params = params.set('onlyActive', 'false');
    let fileResult: Observable<any> = this.http.get(`${this.apiBaseUrl}/${documentId}`, { responseType: "blob", params: params });
    return fileResult;
}

Upvotes: 3

Related Questions