web-dev-qa-db-ja.com

ReactJs / AxiosからダウンロードしたZipファイルが破損している

Django apiからZipファイルをダウンロードして、ユーザーにダウンロードしてもらいます。Zipには2つの.csvファイルがあります。

単一の.csvファイルを個別にダウンロードできますが、Zipをダウンロードして解凍しようとすると、Zipが破損しているというエラーが表示されます。健全性チェックのために、私はPostman経由でリクエストを送信できます。それを使用してファイルを正常にダウンロードして解凍できます。

これが私のコードの断片です：

        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();
djangoreactjszipaxioszipfile
9
btbam91

問題は、「responseType」：「arraybuffer」が「ヘッダー」に含まれていてはならないことでした。

2
btbam91

Btbam91の返信に追加するには：responseTypeが設定の一部である必要があります。上記の例では：

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