Slim 4 + Angular 10 : donwload pdf api is returning empty data in angular blob response

I am trying to integration download pdf angular api with slim 4 api. I can see the response returning from the slim on browser network, but when I try to parse the response in angular it is returning empty. I have added the required headers on both angular and slim.

Angular code:

const blobHeaders = { 
'Accept' : 'application/pdf, application/json, text/plain, */*',
'Content-Type' : 'application/json'
};

getInvoiceDetail(orderId, transId, customerId, brandId) : Promise<any> {
    return this.http
      .get(`${this.url}/v1/orders/invoice/${orderId}/${transId}/${customerId}/${brandId}`, { headers: blobHeaders , responseType : 'blob', observe : 'response'})
      .toPromise()
      .then(response => {
        console.log("---------main----------"+JSON.stringify(response))
        return response;
      })
      .catch(this.commonService.handleError);
  }

The above API console is returning the below:

---------main----------{"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK","url":"https://test.com/v1/orders/invoice/181/145/995/8","ok":true,"type":4,"body":{}}

Slim4 code:

$response = new Response();         
        $csv_file = '/invoice/2023/06/14/2023FS00000165.pdf';

        $response = $response
            ->withHeader('Content-Type', 'application/pdf')
            ->withHeader('Content-disposition', 'attachment; filename="test.pdf"')
            ->withHeader('Access-Control-Expose-Headers', '*')
            ->withHeader('Content-Description', 'File Transfer')
            ->withHeader('Content-Transfer-Encoding', 'binary')
            ->withHeader('Expires', '0')
            ->withAddedHeader('Cache-Control', 'must-revalidate, post-check=0, pre-check=0')
            ->withHeader('Cache-Control', 'post-check=0, pre-check=0')
            ->withHeader('Pragma', 'no-cache')
            ->withBody((new \Slim\Psr7\Stream(fopen($csv_file, 'rb'))));

        return $response;

Getting this blob response from the server

I referred many posts and found need to set 'Access-Control-Expose-Headers' in server side. I did the same too, still facing the issue.

This is working after I changed the 'responseType : text' instead on blob.

getInvoiceDetail(orderId, transId, customerId, brandId) : Promise { return this.http

    .get(`${this.url}/v1/orders/invoice/${orderId}/${transId}/${customerId}/${brandId}`, { headers: blobHeaders , responseType : 'text', observe : 'response'})
      .toPromise()
      .then(response => {
        console.log("---------main----------"+JSON.stringify(response))
        return response;
      })
      .catch(this.commonService.handleError);
  }