FileSaver herunterladen beschädigte ZIP-Datei

Question

Mein Front-End-Code (reagieren) bekommt eine Antwort von meinem Backend (Knoten) und lädt eine Zip-Datei wie erwartet, aber die Zip-Datei, wenn sie geklickt wird statt einer Dekomprimierung eine CPGZ-Datei Postleitzahl.

React-Code

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-Code

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()) 

    })   
}) 
} 

Als ich console.log(res) auf dem Front-End ich einen "beschreibbar Strom" für ein Objekt erhalten. Ich wandle das in einen Blob um und dann benutze ich FileSaver, um die Zip-Datei zu erstellen. Jede Hilfe wird sehr geschätzt. Vielen Dank!

Answer 1

Ihr Backend sendet eine Zip-Datei, keine Textdatei. Verwenden Sie nicht 'Content-type': 'text/plain', verwenden Sie stattdessen 'Content-type': 'application/zip' oder 'Content-type': 'application/octet-stream'.

Was gibt zip(...) zurück? Ich würde einen Nodejs-Puffer erwarten. Wenn dies der Fall ist, wird res.send(data.toString()) Ihren Inhalt von UTF-8 (the default encoding) dekodieren. Da es sich nicht um einen Text, sondern um einen binären Inhalt handelt, werden Sie Ihren Inhalt hier beschädigen. Verwenden Sie stattdessen res.send(data).