javascript - FileSaver 下载损坏的 ZIP 文件

Question

我的前端代码(react)从后端( Node )获取响应并按预期下载 zip 文件，但单击 zip 文件时，将生成 CPGZ 文件，而不是解压缩 zip。

react 代码

downloadResultsFile() {

 fetch(`https://XXXXXXXX/api/download-results-file?jobName=${this.props.selectedRun.jobs[0].env.MIC_JOB_ID}`, {
  origin: 'same-origin', 
})
.then((res) => res.blob())
.then((file) =>  FileSaver.saveAs(file, this.props.selectedRun.jobs[0].env.MIC_JOB_ID + '-results.zip'));   


}

Node 代码

downloadResults: function(app, s3){
app.use('/api', apiRoutes)

apiRoutes.get('/download-results-file', function(req, res, next){
   res.set({'Content-type': 'text/plain'})

   var params = {
    Bucket: 'xxxxx',
    Delimiter: '/',
    Prefix: 'xxxxxx'
   };


   var filesArray = []
   var files = s3.listObjectsV2(params).createReadStream()
   var xml = new XmlStream(files)
   xml.collect('Key')

   xml.on('endElement: Key', function(item) {
     filesArray.push(item['$text'].substr(params.Prefix.length))
    })

   var data = zip(filesArray, req.query.jobName, params)
   xml.on('end', function() {

    res.send(data.toString())

  })        
})
}

当我在前端 console.log(res) 时，我得到一个对象的“可写流”。我将其转换为 blob，然后使用 FileSaver 创建 zip 文件。任何帮助将不胜感激。谢谢你!

Answer 1

您的后端发送的是 zip 文件，而不是文本文件。不要使用 'Content-type': 'text/plain'，而是使用 'Content-type': 'application/zip' 或 'Content-type': 'application/octet-stream'。

zip(...) 返回什么？我期望有一个nodejs缓冲区。如果是这样，res.send(data.toString()) 将从 UTF-8 ( the default encoding ) 解码您的内容。由于它不是文本而是二进制内容，因此您将在这里损坏您的内容。相反，请使用 res.send(data)。