I'm calling an external API that returns a PDF file and I want to return this PDF file in my controller function response.

In My controller class:

  @Get(':id/pdf')
  async findPdf(@Param('id') id: string, @Res() res: Response) {
    const response = await this.documentsService.findPdf(id);

    console.log(response.data); 
    // this prints the following:
    // %PDF-1.5
    // %����
    // 2 0 obj
    // << /Type /XObject /Subtype /Image /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter // /DCTDecode /Width 626 /Height
    //  76 /Length 14780>>
    //  stream
    // and go on...

    return res
      .status(200)
      .header('Content-Type', 'application/pdf')
      .header('Content-Disposition', response.headers['content-disposition'])
      .send(response.data);
  }

In My service class:

  findPdf(id: string): Promise<any> {
    return firstValueFrom(
      this.httpService
        .get(`/docs/${id}/pdf`)
        .pipe(map((response) => response))
        .pipe(
          catchError((e) => {
            throw new BadRequestException('Failed to get PDF.');
          }),
        ),
    );
  }

However I'm getting a blank PDF file in my response.

The internal API call works fine, I've tested it from Postman and the PDF file is correct.

What am I doing wrong?