从ReactJs / Axios下载的Zip文件已损坏

时间:2019-01-29 04:53:50

标签: django reactjs zip axios zipfile

我正在尝试从Django API下载一个zip文件,并让用户下载它。压缩文件中有两个.csv文件。

我能够单独下载一个.csv文件,但是当我尝试下载zip和解压缩文件时,出现了zip损坏的错误消息。对于健全性检查,我可以通过邮递员发送请求。我能够使用它成功下载并解压缩文件。

这是我的代码片段:

        axios
        .post('http://0.0.0.0:8000/sheets/', data,
            {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'responseType': 'arraybuffer'
                }
            })
        .then(res => {
            console.log(res.data)
            const disposition = res.request.getResponseHeader('Content-Disposition')
            var fileName = "";
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) {
                fileName = matches[1].replace(/['"]/g, '');
            }
            let blob = new Blob([res.data], { type: 'application/zip' })

            const downloadUrl = URL.createObjectURL(blob)
            let a = document.createElement("a"); 
            a.href = downloadUrl;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();

2 个答案:

答案 0 :(得分:2)

要添加到btbam91的回复中:responseType必须是配置的一部分。在上面的示例中:

 axios
    .post('http://0.0.0.0:8000/sheets/', data,
        {
            responseType: 'arraybuffer',
            headers: {
                'Content-Type': 'multipart/form-data',
            }
        })

答案 1 :(得分:0)

问题在于'responseType':'arraybuffer'不应位于“标头”中。