I am working on a solution where:

• a single page application vue is reading from a PHP based API endpoint (Laravel);
• a PHP API endpoint calls for external service which in turn uses node/puppeteer express app to print a page;

Node.js app returns file in the following way:

// create pdf, save it locally
....
fs.readFile(pdf, function (err,data){
    response.set({ 'content-type': 'application/pdf; charset=utf-8' });
    response.send(data);
});

PHP endpoint fetches binary using curl:

        $request['url'] = 'https://www.test.com';

        $payload = json_encode($request);

        $ch = curl_init();

        curl_setopt($ch, CURLOPT_URL,'http://service.url');
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type:application/json; charset=UTF-8']);
        curl_setopt($ch, CURLOPT_ENCODING ,'UTF-8');

        $data = curl_exec($ch);

        curl_close($ch);

        return $this->json(['data' => $data]);

The vue app fetches the file in the following way:

async getPdf({ requestId }) {
    const result = await Api.get(`/pdf`, {
      timeout: 30000,
    });
    return result.data;
  },

....
....
const blob = new Blob([response], { type: 'application/pdf' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'test.pdf';
link.click();

The problem happens when I am trying to fetch the file buffer. PHP endpoint gives me "Malformed UTF-8 characters, possibly incorrectly encoded" error.

I tried to solve this by adding $data = mb_convert_encoding($data, 'UTF-8', 'UTF-8'); to curl response yet this resulted in an empty PDF, I assume that this is the encoding problem. PDF file is perfectly fine as it is saved locally first and then processed by node app.

Any ideas on how to solve the encoding issue? Is there a better way to transfer file buffer?