fs.createReadStream、fs.createWriteStreamを用いて,ローカルに保存したpng画像データをユーザーにダウンロードさせたい

前提

GCP上に保存している画像データをユーザにダウンロードさせるため、以下のapiを作成しました。

現在、apiとして以下のようなものを作成しました。

import type { NextApiRequest, NextApiResponse } from 'next'; import { Storage } from '@google-cloud/storage'; import fs, { stat } from 'fs'; export default function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method == 'POST') { // Creates a client const { datasetUrl }: { datasetUrl: string } = req.body; const storage = new Storage({ projectId: process.env.GCP_PROJECT_ID, keyFilename: process.env.GOOGLE_APPLICATION_CREDENTIALS, }); var stat = fs.statSync('sample.png'); res.writeHead(200, { 'Content-Type': 'image/png', 'Content-Disposition': 'attachment; filename=' + datasetUrl, 'Content-Length': stat.size, }); storage .bucket(process.env.GCLOUD_STORAGE_BUCKET!) .file(datasetUrl) .createReadStream() .pipe(res); } }

想定としては、こちらのAPIを呼び出し、data内のbinaryデータを使用して、ライブラリ'js-file-download'にてダウンロードします。

const res = await fetch('POST", '/api/download', {datasetUrl // }); fileDownload(res.data, 'sample.png');

しかし、ダウンロード結果のpngファイルが壊れており、適切にダウンロードできません。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

発生している問題・エラーメッセージ

pngファイルを開く際、

ファイルが壊れているか、“プレビュー”が認識しないフォーマットを使用している可能性があります。

上のようなメッセージがポップアップとともに出現します。

また、本来pngのところ、敢えてtxtファイルでも出力してみたのですが、

①本物のpngファイルをtxtに変換したもの（正解ファイル）

�PNG ��� IHDR������������>a����sBIT|d���kIDATx��]k�$Wu���3���zwg��kwg�yټ��$`����c?HDx$���"�HID a%Ȱ��X@H%�� �w�쬍�ޙ}zgg���3�UuN����n4���T�:u�����~�E8X80�9�O����9~��g��l��Fp�[��s2�>\����q�s2�>\ p~�� p��_@Q�;�M� ��-`{��������V��j��&� ����U?����0�ԣ/� �U��\�q� �<2va��B5W����PL"xDn���8l#0��K� 6q�V��]��o*�9oؑ�p Y����10�����}�+����J �6qv�V�%2|I�M�Ͱ�������8�a��P*�;�Y$Pƛ8[���E�OЏ����=��9mb�𶀂P��5�̨6���X�;3Ƕ4Y�61Lx�����X4�2�5��Y{0�{�Q����s�[@�l� p.� +(���͑���&�N8������j.�d�`g!�-�<��I��˛aa�2F�4��E�=2��™<I�s 0t���D��qJa�OS�;���K�Z� �3�/��&g�޷���f��+��򥂶S�.ٺe|��G

②出力結果をtxtにしたもの

�PNG ��� IHDR������������>a����sBIT|d���kIDATx��]k�$Wu���3���zwg��kwg�yټ��$`����c?HDx$���"�HID a%Ȱ��X@H%�� �w�쬍�ޙ}zgg���3�UuN����n4���T�:u�����~�E8X80�9�O����9~��g��l��Fp�[��s2�>\����q�s2�>\ p~�� p��_@Q�;�M� ��-`{��������V��j��&� ����U?����0�ԣ/� �U��\�q� �<2va��B5W����PL"xDn���8l#0��K� 6q�V��]��o*�9oؑ�p Y����10�����}�+����J �6qv�V�%2|I�M�Ͱ�������8�a��P*�;�Y$Pƛ8[���E�OЏ����=��9mb�𶀂P��5�̨6���X�;3Ƕ4Y�61Lx�����X4�2�5��Y{0�{�Q����s�[@�l� p.� +(���͑���&�N8������j.�d�`g!�-�<��I��˛aa�2F�4��E�=2��™<I�s 0t���D��qJa�OS�;���K�Z� �3�/��&g�޷���f��+��򥂶S�.ٺe|��G

となり、同じ結果だったため大きくおかしい点は無いと思います。(２０行のみ表示)
ただ、res.dataの結果がbinaryではなくstringだったため、文字コードなどエンコーディングの点でおかしい点があるのかと予想しております。

解決方法をご存知であれば教えていただきたいです。