失败，zip文件通过axios从vuejs下载

问题描述

我在Vue.js中下载.zip文件时遇到问题。这是我的代码。

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,});
                }

这是我的回复标题

我下载了文件，但无法正常工作。

但链接有效，这意味着后端站点没有问题。 我该如何解决此错误？

这是我来自服务器的代码。

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',]);
}

解决方法

要通过axios下载文件，应在axios标头中设置responseType

responseType:'blob'