sdk
sdk

Reputation: 81

failed, zip file Download via axios from vuejs

I have a problem with .zip file download in Vue.js. here is my code.

if (response) {
                    let fileName = response.headers["x-suggested-filename"]
                    var fileUrl = window.URL.createObjectURL(new Blob([response.data], {type: "application/zip"}));
                    var fileLink = document.createElement("a");
                    fileLink.href = fileUrl;
                    fileLink.setAttribute("download", fileName);
                    document.body.appendChild(fileLink);
                    fileLink.click();
                } else {
                    this.$notify.error({
                        title:    "Request failed",
                        message:  "No response received. ",
                        duration: 0,
                    });
                }

Here is my response header

Vue.js

I downloaded the file but it doesn't work.

I've archive Utility fail.

but link it's work, it means, backend site has no problem. how can I fix this bug ?

and here is my code from server.

public function export(array $params)
{
    if (!$this->load($params, '') || !$this->validate()) {
        throw new BadRequestHttpException();
    }

    $exporter = new ProfileExporter($this->format);
    $zipFile = new ZipFile();

    $exporter->exportToZipFile($zipFile, $this->profileId, $params);
    $fileName = 'df-profile-data-export-' . \Yii::$app->formatter->asDate('now', 'yyyy-MM-dd') . '.' .
        $this->getFileExtension();

    $stream = fopen('php://memory', 'w+');
    $zipFile->writeToStream($stream);
    \Yii::$app->response->headers->add('X-Suggested-Filename', $fileName);

    \Yii::$app->response->sendStreamAsFile($stream, $fileName, [
        'mimeType' => 'application/zip',
    ]);
}

Upvotes: 1

Views: 2312

Answers (1)

arman amraei
arman amraei

Reputation: 195

for downloading a file via axios you should set responseType in your axios header

responseType:'blob'

Upvotes: 2

Related Questions