Estoy tratando de implementar la descarga de un archivo ZIP desde el servidor usando Next.js, axios y js-file-download. Sin embargo, cuando trato de abrir el archivo descargado, aparece un error que dice que el archivo está dañado.

Estoy seguro de que el archivo en el servidor es válido, por lo que el problema está en la transferencia al cliente.

Además, si trato de descargar otro tipo de archivo (por ejemplo, un archivo .txt), funciona.

Este es el código del servidor, en /pages/api/assignments/[assignmentId]/students/index.tsx:

 export default async function handler(req: NextApiRequest, res: NextApiResponse) { const assignmentId = req.query.assignmentId as string; const assignment = // here I get assignment from database switch(req.method) { case('GET'): const fileNames = assignment.fileUploads.map((fileUpload: AssignmentFileUpload) => fileUpload.fileName); const archivePath = `./resources/assignment_archives/${assignmentId}.zip`; // --- RELEVANT CODE STARTS HERE --- const archiveReadStream = fs.createReadStream(archivePath); res.writeHead(200, { 'Content-Type': 'application/zip', 'Content-Disposition': `attachment; filename=${assignment.title}.zip` }); archiveReadStream.pipe(res); } }

Y este es el código en el lado del cliente:

 const handleDownload = async (event: any) => { axios.get(`/api/assignments/${assignment.id}/students`, { responseType: 'arraybuffer', headers: { 'Content-Type': 'application/zip' } }) .then((res) => { fileDownload(res.data, `${assignment.title}.zip`) // function imported from js-file-download }); }

Ya he intentado jugar con los encabezados, pero nada funcionó.