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

Question

我对.zip文件在Vue.js中的下载有问题。这是我的密码。

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

Answer 1

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

responseType:'blob'