손상된 ZIP 파일을 다운로드하는 FileSaver

내 프런트 엔드 코드 (반응)가 내 백엔드 (노드)에서 응답을 받고 예상대로 zip 파일을 다운로드하지만 zip 파일을 클릭하면 해당 파일의 압축을 푸는 대신 CPGZ 파일이 생성됩니다. 지퍼. 손상된 ZIP 파일을 다운로드하는 FileSaver

반작용 코드

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')); 


}

노드 코드

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 파일을 만듭니다. 어떤 도움이라도 대단히 감사하겠습니다. 고맙습니다!

출처

2017-03-06 Mihado

이 수정 프로그램은 문제를 해결할 것으로 보입니다. https://github.com/eligrey/FileSaver.js/issues/156 – ramtech

백엔드는 텍스트 파일이 아닌 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)을 사용하십시오.

출처

2017-03-09 18:04:09

손상된 ZIP 파일을 다운로드하는 FileSaver

답변

관련 문제