Angular 6 interceptor : Change response content type

Question

I'm using a REST api, that send me json data with file info (base64 content, mime...). I want to open PDF in Chrome. URL.createObjectURL is a bad solution because after redirection, we can't download the file.

So, as a backend, i want to change the header response to "application/pdf", and display file content directly.

I searched in HttpClient Interceptors module :

   @Injectable()
   export class DownloadInterceptor implements HttpInterceptor {
          intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

           return next.handle(request).map(event => {
               if (event instanceof HttpResponse) {
                   if (event.body) {
                       let fileContent, typeMime;
                       fileContent = event.body.cContenuFichier;

                       let headers = new HttpHeaders({
                           'Content-Type': 'application/pdf'
                       });
                       event = event.clone({ body: fileContent, headers: headers })
                   }
               }         
               return event;
           });
       }

Now, how to display this ? If i use a component, file content is display in classic html page.

So, is it possible ? With angular ? With node ?

Many thanks,

score 2 · Answer 1 · answered Jun 21 '18 at 10:36

2

Response headers are set and sent by server. Using express, you have option to set response headers as follows:

res.set('Content-Type', 'application/pdf');
res.status(//statusCode).send(//Actual response to send);

In Node.js, you can do as follows:

res.setHeader('Content-Type', 'application/pdf');
res.end(//Actual response);

answered Jun 21 '18 at 10:36

lifetimeLearner007

643
6
17

Yes that's what I thought, we can't in angular. Thanks – lginlap Jun 21 '18 at 12:48

score -1 · Answer 2 · answered Jun 21 '18 at 11:25

Try cloning the request with responseType: arraybuffer

@Injectable()
export class DownloadInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        request = request.clone({
            responseType: 'arraybuffer'
        });
    }
}

Angular 6 interceptor : Change response content type

2 Answers2